<video src="blob:http://www.bilibili.com/d0823f0f-2b2a-4fd6-a93a-e4c82173c107"></video>

var video = document.querySelector(‘video‘);
var mediaSource = new MediaSource;
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(‘sourceopen‘, sourceOpen)

function sourceOpen () {
  
 
var mediaSource = this;
  var sourceBuffer = mediaSource.addSourceBuffer(‘video/mp4; codecs="avc1.42E01E, mp4a.40.2"‘);
  sourceBuffer.addEventListener(‘updateend‘, function () {
    mediaSource.endOfStream();
    video.play();
  });
  sourceBuffer.appendBuffer(buf); // buf is the arraybuffer to store the video data
 

};

首先創建變量名為 video 的 DOM 對象。之後，創建變量名為 mediaSource 的MediaSource 對象。 通過函數 createObjecturl 來將 DOM::Video 對象的屬性src 和 mediaSource 進行“連接”。 接下來，通過註冊事件 Event::sourceopen來觸發當上述“連接”結束之後的回調處理。回調處理就是需要賦值 視頻數據 的地方。 調用 MediaSource::addSourceBuffer 方法來構建一個存放視屏數據的 Buffer。 在往 Buffer 中存放數據結束之後會觸發事件 Event::updateend

通過查看 B 站的前端代碼，發現其 HTML5 播放器實現原理和這個差不多，主要使用 new MediaSource 和 createObjectURL 這2個函數。（當然實現不會這麽簡單，比如異常處理，用戶交互等都是需要巨量的代碼來覆蓋。）

出處：https://creamidea.github.io/static/html/articles/HTML5-Video-Blob.html

HTML5 Video Blob