在處理視頻的時(shí)候庙睡，最基本的用法就是通過video來引入著角，但使用上總有些缺陷揪漩，例如視頻源暴露問題，以及資源的播放加載問題吏口，于是乎特地去看專業(yè)的視頻網(wǎng)站的做法奄容，發(fā)現(xiàn)他們的鏈接地址中都包含了blob
<video src="blob:http://www.bilibili.com/d0823f0f-2b2a-4fd6-a93a-e4c82173c107"></video>
打開鏈接的時(shí)候，卻顯示了404产徊，查閱了資料昂勒，才知道這是視頻”分段緩沖播放“處理，通過 MediaSource 和 createObjecturl 的配合舟铜。
那么如何處理呢戈盈，直接上代碼：
//先創(chuàng)建變量名為 `video` 的 DOM 對象
var video = document.querySelector('video');
// 創(chuàng)建MediaSource對象
var mediaSource = new MediaSource;
// 將mediaSource通過createObjecturl函數(shù)賦值給src
video.src = URL.createObjectURL(mediaSource);
// 監(jiān)聽sourceopen事件，當(dāng)video產(chǎn)生src時(shí)谆刨，處理視頻數(shù)據(jù)
mediaSource.addEventListener('sourceopen', sourceOpen)
function sourceOpen () {
var mediaSource = this;
// 構(gòu)建一個(gè)存放視屏數(shù)據(jù)的 Buffer
var sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
// 監(jiān)聽updateend事件塘娶，數(shù)據(jù)加載完畢就播放視頻
sourceBuffer.addEventListener('updateend', function () {
mediaSource.endOfStream();
video.play();
});
// 添加緩沖數(shù)據(jù)，buf是用于存儲視頻數(shù)據(jù)的緩沖數(shù)組
sourceBuffer.appendBuffer(buf);
};
邏輯是這樣的：
先創(chuàng)建變量名為
video的 DOM 對象痊夭。之后刁岸，創(chuàng)建變量名為mediaSource的MediaSource對象。 通過函數(shù)createObjecturl來將DOM::Video對象的屬性src和mediaSource進(jìn)行“連接”她我。 接下來虹曙，通過注冊事件Event::sourceopen來觸發(fā)當(dāng)上述“連接”結(jié)束之后的回調(diào)處理》撸回調(diào)處理就是需要賦值 視頻數(shù)據(jù) 的地方根吁。 調(diào)用MediaSource::addSourceBuffer方法來構(gòu)建一個(gè)存放視屏數(shù)據(jù)的 Buffer。 在往 Buffer 中存放數(shù)據(jù)結(jié)束之后會觸發(fā)事件Event::updateend合蔽。 通過注冊這個(gè)事件的回調(diào)击敌，可以知曉數(shù)據(jù)已經(jīng)加載完畢，然后調(diào)用Video::play函數(shù)通知瀏覽器播放視頻拴事。 至此沃斤，整個(gè) Blob 運(yùn)行機(jī)制講解完畢。詳細(xì)的技術(shù)細(xì)節(jié)需要花一段時(shí)間來查看刃宵，暫時(shí)停止在這里衡瓶。我們先知道這個(gè)是什么東西。<(￣3￣)>主要使用 new MediaSource 和 createObjectURL 這2個(gè)函數(shù)牲证。（當(dāng)然實(shí)現(xiàn)不會這么簡單哮针，比如異常處理，用戶交互等都是需要巨量的代碼來覆蓋。）
最后十厢，引用一些別人的結(jié)語：
這個(gè)只是 HTML5 提供的新特性等太，但是截止目前還是處于試驗(yàn)狀態(tài)÷牛可是缩抡，現(xiàn)在已經(jīng)有許多的廠商開始使用，有大廠的支持包颁，心里稍稍安心啦瞻想。
出處：
https://creamidea.github.io/static/html/articles/HTML5-Video-Blob.html
