A blob is a copy of content that has already been downloaded, so there's no need to download again. As opposed to text data, a blob is binary data and therefore is much smaller (each char takes two bytes in JavaScript) than text or text encoded data. Another benefit of blob is since data has been already downloaded, the browser doesn't need to send multiple requests to the originating server to render the same content.
Instead, the server packages content and any instructions for further content to be added (at client side), sends to browser (client) which renders content & handles any content update on client side, relieving server from additional traffic or workload. Blobs have their roots in databases, which evolved to store data as binary objects, for the very same reasons of efficiency. The beginnings of blobs were already evident in the days when dynamic webpages were making headlines and client side scripting became a thing.
A blob itself is data/resource, as opposed to a URL which points to source of data, and can be as simple as an array of bytes or a single file. To extract data from a blob for rendering in a browser, pass the blob to URL.createObjectURL() to create a 'blob URL' in the browser, of the form
blob:[protocol]://[server].[domain]/[blob ID]
eg. blob:https://thenewsit.com/345a291c-ac2e-456a-a202-2a8f131327ea
This URL then becomes the source of data eg. fed to src attribute of html tags or elements for rendering in the browser, without involving the server.
Here's an example to create a blob, extract data from it & display on browser:
HTML
<input type="file" id="fileItem" onchange="onChange()">
<video></video>
<br><label id="blob"></label>
JavaScript
function onChange() {
var file = document.getElementById('fileItem').files[0];
var vid = document.getElementsByTagName('video')[0];
var url = URL.createObjectURL(file);
document.getElementById('blob').innerHTML = "Blob URL is:<br>".concat(url);
document.getElementById('fileItem').type = "hidden";
vid.src = url;
vid.load();
vid.onloadeddata = function() {
vid.play();
}
}
XHR example blob:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'doby.mp4', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
var blob = this.response;
var vid = document.getElementsByTagName('video')[0];
vid.src = URL.createObjectURL(blob);
vid.load();
vid.onloadeddata = function() {
vid.play();
}
};
xhr.send();
To access blob data on newer browsers:
video.srcObject = blob;
Tested in jsfiddle
