HTML5 Video Blob

我的博客搬家到https://www.w2le.com/了

<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 。 通過注冊這個事件的回調，可以知曉數據已經加載完畢，然后調用 Video::play 函數通知瀏覽器播放視頻。 至此，整個 Blob 運行機制講解完畢。詳細的技術細節需要花一段時間來查看，暫時停止在這里。我們先知道這個是什么東西。<(￣3￣)>

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

 

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