videos ver reproducir open how convert html5-video bloburls

html5 video - ver - ¿Qué es una URL de blob y por qué se usa?



reproducir blob http (4)

Esta función Javascript pretende mostrar la diferencia entre la API de archivos Blob y la API de datos para descargar un archivo JSON en el navegador del cliente:

/** * Save a text as file using HTML <a> temporary element and Blob * @author Loreto Parisi */ var saveAsFile = function(fileName, fileContents) { if (typeof(Blob) != ''undefined'') { // Alternative 1: using Blob var textFileAsBlob = new Blob([fileContents], {type: ''text/plain''}); var downloadLink = document.createElement("a"); downloadLink.download = fileName; if (window.webkitURL != null) { downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob); } else { downloadLink.href = window.URL.createObjectURL(textFileAsBlob); downloadLink.onclick = document.body.removeChild(event.target); downloadLink.style.display = "none"; document.body.appendChild(downloadLink); } downloadLink.click(); } else { // Alternative 2: using Data var pp = document.createElement(''a''); pp.setAttribute(''href'', ''data:text/plain;charset=utf-8,'' + encodeURIComponent(fileContents)); pp.setAttribute(''download'', fileName); pp.onclick = document.body.removeChild(event.target); pp.click(); } } // saveAsFile /* Example */ var jsonObject = {"name": "John", "age": 30, "car": null}; saveAsFile(''out.json'', JSON.stringify(jsonObject, null, 2));

La función se llama como saveAsFile(''out.json'', jsonString); . Creará un ByteStream inmediatamente reconocido por el navegador que descargará el archivo generado directamente usando la API de archivo URL.createObjectURL .

En lo else , es posible ver el mismo resultado obtenido a través del elemento href más la API de datos, pero esto tiene varias limitaciones que la API Blob no tiene.

Tengo muchos problemas con la URL de blob.

Estaba buscando el src de una etiqueta de video en YouTube y descubrí que el src video era como:

src="blob:https://crap.crap"

Abrí la URL del blob que estaba en src del video, me dio un error. No puedo abrir el enlace, pero funcionaba con la etiqueta src . ¿Cómo es esto posible?

Requisitos:

  • ¿Qué es el blob URL?
  • ¿Por qué se usa?
  • ¿Puedo hacer mi propia URL de blob en un servidor?
  • Si tienes algún detalle adicional

He modificado la solución de trabajo para manejar tanto el caso ... cuando se carga el video como cuando se carga la imagen ... espero que ayude un poco.

duración html:

Javascript

var fileEl = document.querySelector("input"); fileEl.onchange = function(e) { var file = e.target.files[0]; // selected file if (!file) { console.log("nothing here"); return; } console.log(file); console.log(''file.size-'' + file.size); console.log(''file.type-'' + file.type); console.log(''file.acutalName-'' + file.name); let start = performance.now(); var mime = file.type, // store mime for later rd = new FileReader(); // create a FileReader if (/video/.test(mime)) { rd.onload = function(e) { // when file has read: var blob = new Blob([e.target.result], { type: mime }), // create a blob of buffer url = (URL || webkitURL).createObjectURL(blob), // create o-URL of blob video = document.createElement("video"); // create video element //console.log(blob); video.preload = "metadata"; // preload setting video.addEventListener("loadedmetadata", function() { // when enough data loads console.log(''video.duration-'' + video.duration); console.log(''video.videoHeight-'' + video.videoHeight); console.log(''video.videoWidth-'' + video.videoWidth); //document.querySelector("div") // .innerHTML = "Duration: " + video.duration + "s" + " <br>Height: " + video.videoHeight; // show duration (URL || webkitURL).revokeObjectURL(url); // clean up console.log(start - performance.now()); // ... continue from here ... }); video.src = url; // start video load }; } else if (/image/.test(mime)) { rd.onload = function(e) { var blob = new Blob([e.target.result], {type: mime}), url = URL.createObjectURL(blob), img = new Image(); img.onload = function() { console.log(''image''); console.dir(''this.height-'' + this.height); console.dir(''this.width-'' + this.width); URL.revokeObjectURL(this.src); // clean-up memory console.log(start - performance.now());// add image to DOM } img.src = url; }; } var chunk = file.slice(0, 1024 * 1024 * 10); // .5MB rd.readAsArrayBuffer(chunk); // read file object };

jsFiddle Url

https://jsfiddle.net/PratapDessai/0sp3b159/


Las URL de blob (ref W3C , nombre oficial) o las URL de objeto (ref. MDN y nombre del método) se utilizan con un objeto Blob o File .

src = "blob: https: //crap.crap " Abrí la URL del blob que estaba en el src del video, me dio un error y no puedo abrirlo, pero estaba trabajando con la etiqueta src, ¿cómo es posible?

Las URL de blob solo pueden ser generadas internamente por el navegador. URL.createObjectURL() creará una referencia especial al objeto Blob o File que luego se puede liberar usando URL.revokeObjectURL() . Estas URL solo se pueden usar localmente en la única instancia del navegador y en la misma sesión (es decir, la vida útil de la página / documento).

¿Qué es blob url?
¿Por qué se usa?

Blob URL / Object URL es un pseudo protocolo para permitir que los objetos Blob y File se utilicen como fuente de URL para cosas como imágenes, enlaces de descarga para datos binarios, etc.

Por ejemplo, no puede entregar un objeto de imagen datos de byte sin procesar ya que no sabría qué hacer con él. Requiere, por ejemplo, imágenes (que son datos binarios) para cargarse a través de URL. Esto se aplica a todo lo que requiera una URL como fuente. En lugar de cargar los datos binarios, luego devolverlos a través de una URL, es mejor usar un paso local adicional para poder acceder a los datos directamente sin pasar por un servidor.

También es una mejor alternativa a Data-URI, que son cadenas codificadas como Base-64 . El problema con Data-URI es que cada carácter toma dos bytes en JavaScript. Además de eso, se agrega un 33% debido a la codificación Base-64. Los blobs son conjuntos de bytes binarios puros que no tienen una sobrecarga significativa como lo hace Data-URI, lo que los hace más rápidos y más pequeños de manejar.

¿Puedo hacer mi propia URL de blob en un servidor?

No, las URL de blob / URL de objeto solo se pueden hacer internamente en el navegador. Puede hacer Blobs y obtener un objeto File a través de la API de File Reader, aunque BLOB solo significa Binary Large OBject y se almacena como conjuntos de bytes. Un cliente puede solicitar que los datos se envíen como ArrayBuffer o como Blob. El servidor debe enviar los datos como datos binarios puros. Las bases de datos a menudo usan Blob para describir objetos binarios también, y en esencia estamos hablando básicamente de conjuntos de bytes.

si tienes entonces Detalles adicionales

URL.createObjectURL() encapsular los datos binarios como un objeto BLOB, luego usar URL.createObjectURL() para generar una URL local para él:

var blob = new Blob([arrayBufferWithPNG], {type: "image/png"}), url = URL.createObjectURL(blob), img = new Image(); img.onload = function() { URL.revokeObjectURL(this.src); // clean-up memory document.body.appendChild(this); // add image to DOM } img.src = url; // can now "stream" the bytes

Tenga en cuenta que la URL puede tener el prefijo en los navegadores webkit, así que use:

var url = (URL || webkitURL).createObjectURL(...);


¿Qué es blob url? ¿Por qué se usa?

BLOB es solo una secuencia de bytes. El navegador lo reconoce como flujo de bytes. Se utiliza para obtener el flujo de bytes desde la fuente.

Un objeto Blob representa un objeto similar a un archivo de datos inmutables sin procesar. Los blobs representan datos que no están necesariamente en un formato nativo de JavaScript. La interfaz de archivo se basa en Blob, hereda la funcionalidad de blob y la expande para admitir archivos en el sistema del usuario.

¿Puedo hacer mi propia URL de blob en un servidor?

Sí, puede, hay varias formas de hacerlo, por ejemplo, intente http://php.net/manual/en/function.ibase-blob-echo.php

Leer más en