I am having a lot of problems with blob URL.
I was searching for src
of a video tag on YouTube and I found that the video src
was like:
src="blob:https://crap.crap"
I opened the blob URL that was in src
of the video it gave an error. I can't open the link, but it was working with the src
tag. How is this possible?
Requirements:
This question is related to
html5-video
bloburls
What is blob url? Why it is used?
BLOB is just byte sequence. Browser recognize it as byte stream. It is used to get byte stream from source.
A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.
Can i make my own blob url on a server?
Yes you can there are serveral ways to do so for example try http://php.net/manual/en/function.ibase-blob-echo.php
Read more on
I have modified working solution to handle both the case.. when video is uploaded and when image is uploaded .. hope it will help some.
HTML
<input type="file" id="fileInput">
<div> duration: <span id='sp'></span><div>
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('iamge');
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
This Javascript function purports to show the difference between the Blob File API and the Data API to download a JSON file in the client browser:
/**_x000D_
* Save a text as file using HTML <a> temporary element and Blob_x000D_
* @author Loreto Parisi_x000D_
*/_x000D_
_x000D_
var saveAsFile = function(fileName, fileContents) {_x000D_
if (typeof(Blob) != 'undefined') { // Alternative 1: using Blob_x000D_
var textFileAsBlob = new Blob([fileContents], {type: 'text/plain'});_x000D_
var downloadLink = document.createElement("a");_x000D_
downloadLink.download = fileName;_x000D_
if (window.webkitURL != null) {_x000D_
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);_x000D_
} else {_x000D_
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);_x000D_
downloadLink.onclick = document.body.removeChild(event.target);_x000D_
downloadLink.style.display = "none";_x000D_
document.body.appendChild(downloadLink);_x000D_
}_x000D_
downloadLink.click();_x000D_
} else { // Alternative 2: using Data_x000D_
var pp = document.createElement('a');_x000D_
pp.setAttribute('href', 'data:text/plain;charset=utf-8,' +_x000D_
encodeURIComponent(fileContents));_x000D_
pp.setAttribute('download', fileName);_x000D_
pp.onclick = document.body.removeChild(event.target);_x000D_
pp.click();_x000D_
}_x000D_
} // saveAsFile_x000D_
_x000D_
/* Example */_x000D_
var jsonObject = {"name": "John", "age": 30, "car": null};_x000D_
saveAsFile('out.json', JSON.stringify(jsonObject, null, 2));
_x000D_
The function is called like saveAsFile('out.json', jsonString);
. It will create a ByteStream immediately recognized by the browser that will download the generated file directly using the File API URL.createObjectURL
.
In the else
, it is possible to see the same result obtained via the href
element plus the Data API, but this has several limitations that the Blob API has not.
Source: Stackoverflow.com