What is a blob URL and why it is used

Question

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    What is blob URL  Why it is used  Can I make my own blob URL on a server  If you have any additional details

User · Answer

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_

/**_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.

User · Answer

Blob URLs  ref W3C  official name  or Object-URLs  ref  MDN and method name  are used with a Blob or a File object   src  quot blob https   crap crap quot  I opened the blob url that was in src of video it gave a error and i can t open but was working with the src tag how it is possible   Blob URLs can only be generated internally by the browser  URL createObjectURL   will create a special reference to the Blob or File object which later can be released using URL revokeObjectURL    These URLs can only be used locally in the single instance of the browser and in the same session  ie  the life of the page document    What is blob url  Why it is used   Blob URL Object URL is a pseudo protocol to allow Blob and File objects to be used as URL source for things like images  download links for binary data and so forth  For example  you can not hand an Image object raw byte-data as it would not know what to do with it  It requires for example images  which are binary data  to be loaded via URLs  This applies to anything that require an URL as source  Instead of uploading the binary data  then serve it back via an URL it is better to use an extra local step to be able to access the data directly without going via a server  It is also a better alternative to Data-URI which are strings encoded as Base-64  The problem with Data-URI is that each char takes two bytes in JavaScript  On top of that a 33  is added due to the Base-64 encoding  Blobs are pure binary byte-arrays which does not have any significant overhead as Data-URI does  which makes them faster and smaller to handle   Can i make my own blob url on a server   No  Blob URLs Object URLs can only be made internally in the browser  You can make Blobs and get File object via the File Reader API  although BLOB just means Binary Large OBject and is stored as byte-arrays  A client can request the data to be sent as either ArrayBuffer or as a Blob  The server should send the data as pure binary data  Databases often uses Blob to describe binary objects as well  and in essence we are talking basically about byte-arrays   if you have then Additional detail  You need to encapsulate the binary data as a BLOB object  then use URL createObjectURL   to generate a local URL for it  var blob   new Blob  arrayBufferWithPNG    type   quot image png quot         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  quot stream quot  the bytes  Note that URL may be prefixed in webkit-browsers  so use  var url    URL    webkitURL  createObjectURL

User · Answer

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   lt input type  file  id  fileInput  gt   lt div gt  duration   lt span id  sp  gt  lt  span gt  lt div gt    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       lt br gt 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  https   jsfiddle net PratapDessai 0sp3b159

User · Answer

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    https   developer mozilla org pl docs Web API Blob http   www w3 org TR FileAPI  dfn-Blob https   url spec whatwg org  urls

[html5-video] What is a blob URL and why it is used?

Examples related to html5-video

Examples related to bloburls