video blob 原

<video id="blp_2P3Sdy9Z_1" class="bilibili-live-player-video-stream" tabindex="-1" style="z-index: 1;" src="blob:https://live.bilibili.com/40f09fae-79b1-4cb1-9aca-210f5e186e53"></video>

分段緩衝播放，video的src爲blob:http協議 / https

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
};

https://stackoverflow.com/questions/14317179/display-a-video-from-a-blob-javascript/14360868#14360868

function display(vid){

    var video = document.getElementById("video");
    video.src = window.URL.createObjectURL(vid);

}

I would like to display a video from a Javascript Blob/File object in the HTML5 video tag.

This code only works for small videos :

var reader = new FileReader();
reader.onload = function(e) {
    document.getElementById("video").src=reader.result;
 }
reader.readAsDataURL(vid);

I cannot use this for big videos (> 10MB). Is there a solution to display a big video from a blob object in HTML 5?

 

function playVideo(videoStream){ // as blob 

 var video = document.querySelector('video');

 var videoUrl=window.URL.createObjectURL(videoStream.data);// blob.data gives actual data

 video.src = videoUrl;
}

 

首先創建變量名爲 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個函數。（當然實現不會這麼簡單，比如異常處理，用戶交互等都是需要巨量的代碼來覆蓋。）

尾聲

綜上，這個只是 HTML5 提供的新特性，但是截止目前還是處於試驗狀態。可是，現在已經有許多的廠商開始使用，比如 B 站，比如 YouTube。 有大廠的支持，心裏稍稍安心啦。

爲了及時淘汰老舊的瀏覽器，讓她們“安詳”的推出歷史舞臺。需要你我所有人的努力。