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
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