24

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?

Cœur
  • 34,719
  • 24
  • 185
  • 251
giovaZ
  • 1,442
  • 3
  • 19
  • 54

3 Answers3

0

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>
  • 1
    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
-2

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.

SidD
  • 4,779
  • 4
  • 15
  • 25
  • 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
-3

I used jDownloader to download a video like in your question; it's a free multiplatform program written in Java, as the "j" before its name suggests. You simply need to copy the url of the page that has the video, and the program will scan the webpage to find all that can be downloaded. Very useful, try it (http://jdownloader.org/download/index).

Riccardo Volpe
  • 1,303
  • 1
  • 14
  • 27
  • I tried with a video on Facebook in my case, with success – Riccardo Volpe Feb 13 '17 at 11:05
  • Are you sure this works with `blob:` urls? The short description for it says nothing about anything like this. – Jonathan Wood Mar 19 '17 at 16:55
  • I'm pretty sure, because I used it. May you post the webpage where your video is located? – Riccardo Volpe Mar 20 '17 at 19:37
  • I realized a video to show how to do it by using jDownloader: https://youtu.be/IBKRNdBJxMc – Riccardo Volpe Mar 20 '17 at 22:14
  • Facebook has two kinds of videos. Standard URLs like before and Blobs. You CAN NOT DOWNLOAD BLOBS with jDownloader. Please investigate again. – Markus Zeller Apr 15 '18 at 17:28
  • Hello, @Markus Zeller, may you provide a video as example to test it, please? Thank you – Riccardo Volpe Apr 16 '18 at 12:18
  • @RiccardoVolpe: Try this URL https://www.facebook.com/Alain.Comedy/videos/1265649210199221 having this BLOB: blob:https://www.facebook.com/b798665c-865b-463a-b848-652c242731d3 (BLOB changes on every call) – Markus Zeller Apr 16 '18 at 16:05
  • @MarkusZeller, I will try by using jDownloader from PC; I haven't my PC now. In the meantime, visiting your link with Firefox mobile, it's simple to download it, as you can see from this screencast: https://drive.google.com/file/d/1llJ1nKuYo_tOVrIrnWlaqSAd2O6W8hHk/view?usp=drivesdk You need to rename the downloaded file giving the mp4 file extension – Riccardo Volpe Apr 17 '18 at 15:27
  • @RiccardoVolpe Note, that you use the mobile version of Facebook which looks like providing another file and not a blob (not tested, yet). But that's a nice idea to use the mobile Facebook version to achieve a download. – Markus Zeller Apr 18 '18 at 11:00
  • @RiccardoVolpe Just investigated what happens, when you swap the "www" from the URL with "m". You really get a simple site which contains an image linked to a "normal" video which you can download with the browser simply with **Save As**. So is confirmed that is **not a blob** download. – Markus Zeller Apr 20 '18 at 06:37