retrieve a download a file from a "blob" url

Question

A website have a video tag element structured like this:

<video id="playerVideo" width="450px" autoplay="autoplay" height="338px" style="height:100%;width:100%;" class="mejs-rai-e" src="blob:http%3A//www.example.com/d70a74e1-0324-4b9f-bad4-84e3036ad354"></video>

As you can see the src element have an url pre-configured as blob. Is there a method like a script or a video downloader plug-in to locate the file and download it?

score 0 · Answer 1 · answered Nov 05 '19 at 22:43

If you have the blob url, you can set the href attribute from an <a> (link) tag to download the file.

In the following example I created the blob url using the xhr response. The answer to the question basically you can find in the function called download().

function setVideo(blob)
{
  var url = URL.createObjectURL(blob);
 var video = document.getElementById('playerVideo');
 video.type = "video/mp4";
 video.src = url;
 video.load();
 download(url);
}
 
function download(blob_url)
{
 var fileName = "video.mp4";
 var a = document.createElement('a');
 a.href        = blob_url;
 a.download    = fileName;
 a.textContent = "DOWNLOAD " + fileName;
 document.getElementById('blobURL').innerHTML = "BLOB URL: <b>"+blob_url+"</b>";
 document.getElementById('download').appendChild(a);
}
 
$(document).ready(function(){
 var xhr = new XMLHttpRequest();
 xhr.responseType = 'blob';

 xhr.onload = function() {
  setVideo(xhr.response);
 };

 xhr.open('GET', 'https://cors-anywhere.herokuapp.com/http://techslides.com/demos/sample-videos/small.mp4');
 xhr.send();

});

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<h1>My Page</h1>
<p>Some paragraph.</p>
<video id="playerVideo" width="320" height="240" autoplay="autoplay" muted>
  Your browser does not support the video tag.
</video><br>
<span id="blobURL"></span><br>
<span id="download"></span>

</body>
</html>

I created an HTML page with `link`, loaded the page in Chrome, right clicked the link and chose "Save link as" and I immediately get a Network error in Chrome. — Adam S, Sep 16 '20 at 16:50
@AdamS Neither `_blob:https://link/to/video_` nor `_https://link/to/video_` is the blob url to the video file. Take a look at the blob url given by the browser above in the code snipped. A Blob is stored in the memory much like any other ArrayBuffer. It's stored in the ram, just like the other objects declared in the window (Reference: [link](https://stackoverflow.com/questions/38239361/where-is-blob-binary-data-stored#:~:text=A%20Blob%20is%20stored%20in,physically%20stored%20in%20the%20ram.)). So using `_href="blob:https://link/to/video"_` will indeed give you an error. — chippie3000, Oct 29 '20 at 00:12
Also from what I can understand, you won't be able to just download blob file from a website directly through the link of the file (ex: _blob:https://link/to/video_). You probably need a token. The browser will give you CORS error instead. This error is a security mechanism called the same-origin policy ( [Why was the CORS error there in the first place?](https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9#:~:text=The%20error%20stems%20from%20a,the%20browser's%20cookie%20storage%20system.)). That's why I use cors-anywhere.herokuapp.com — chippie3000, Oct 30 '20 at 15:46

SidD · Answer 2 · 2017-03-20T10:51:45.850

-3

I was also looking for the same, but after so many days of search i could not find one(chrome extension),as the last option i downloaded GETFLV software,it plays the video in the application itself and you are able to download the video.Alternatively you can also use KeepVid Pro.

edited Mar 20 '17 at 10:51

answered Feb 07 '17 at 13:14

SidD

5,697
4
18
30

This answer is confusing at best. You say that you could not find one and yet you describe that GETFLV lets you download the video. Wasn't that the goal? Did you find one? – Jonathan Wood Mar 19 '17 at 16:52
I could not find a chrome extension,instead i have had to used other software, i did not wanted an executable file :) – SidD Nov 08 '17 at 10:35

retrieve a download a file from a "blob" url

2 Answers2