0

I need to host some videos on my website. I was looking how youtube does it, but i don't understand the video source. Below is the video tag in youtube. The source is a blob, why? What does the url mean? How does it work? How can i do the same thing?

<div class="html5-video-container" data-layer="0">
    <video tabindex="-1" class="video-stream html5-main-video" 
    style="width: 640px; height: 360px; left: 0px; top: 0px; opacity: 1;" 
    src="blob:https://www.youtube.com/9effef84-87ae-43c0-abae-8005d399e1fd">
    </video>
</div>

Thank you in advance.

user6927974
  • 23
  • 1
  • 6

1 Answers1

0

YouTube use MediaSource Extensions (MSE) in firefox the src will be look like "mediasource:https://www.youtube.com/9effef84-87ae-43c0-abae-8005d399e1fd" To use MediaSource you need conwert your video in mpeg-dash format. This means that the video will be broken into several files. One of them (metadata file .mp4) will be contain moov atom and other (.m4s) moof and MDAT atoms. You can achieve this with ffmpeg and download it in browser using xmlhttprequest or webSocket. You can also use the Blob is a small example:

 xhr.open('GET', "http://localhost:1313/1.mp4", true);
 xhr.responseType = 'arraybuffer';
 xhr.onload = function(){
  file = new Blob([ new Uint8Array(xhr.response) ], {type: 'video/mp4'});
  document.querySelector("video").src = URL.createObjectURL(file);
  }
 xhr.send();
MBajor13
  • 1
  • 4