0

I would like to know the process that these websites use to source a video in blob format from their server?

<video height="390" width="693" preload="auto" src="blob:https://www.facebook.com/34799f7c-34d4-48c7-976f-1e2ddba0728a"></video>

I'm looking to implement the same method on my site.

I am able to source a video using blob. But the process is slow as I have to first retrieve (download) the video from the server, then create the blob.

var xhr = new XMLHttpRequest();
xhr.open("GET", "video.mp4"); 
xhr.responseType = "blob";
xhr.onload = function() 
{
    var video = document.getElementById("videoId");
    video.src = URL.createObjectURL(xhr.response);
}
xhr.send();

If the video is 10 minutes long it takes about 15 seconds after the page has loaded for the video source to update.

However, when you watch a video on YouTube for example, it loads almost instantly. How do they load videos so fast using blob?

T. Short
  • 3,481
  • 14
  • 30
  • Possible duplicate of https://stackoverflow.com/questions/33389001/what-is-blob-in-the-video-src-bloburl –  Aug 14 '17 at 12:38
  • 1
    I don't know why people downvoted this question, it is not bad at all. – Suraj Jain Feb 18 '18 at 11:42

1 Answers1

0

YouTube uses MediaSource extensions to have fine-grained control over video playback. However, that's probably more sophisticated than most users need. The simplest way to play back an .mp4 file is:

var video = document.getElementById("videoId");
video.src = "video.mp4";

This will download only what the user watches, similar to how YouTube works.

Brian Malehorn
  • 2,627
  • 14
  • 15