簡(jiǎn)介
媒體源擴(kuò)展 API（MSE） 提供了實(shí)現(xiàn)無插件且基于 Web 的流媒體的功能。使用 MSE，媒體流能夠通過 創(chuàng)建，并且能通過使用 和 元素進(jìn)行播放。
實(shí)現(xiàn)
正如上面所說，MSE 讓我們可以通過 JS 創(chuàng)建媒體資源，使用起來也十分方便：
//創(chuàng)建了一個(gè)新的MediaSource對(duì)象。
//MediaSource對(duì)象表示媒體數(shù)據(jù)源，可以動(dòng)態(tài)地將數(shù)據(jù)添加到此源中
const mediaSource = new MediaSource();
const video = document.querySelector('video');
// 與窗口中的 document 綁定
video.src = URL.createObjectURL(mediaSource);
媒體資源對(duì)象創(chuàng)建完畢，接下來就是喂給它視頻數(shù)據(jù)（片段），代碼看上去就像是：
//sourceopen事件：媒體源已經(jīng)與HTML媒體元素關(guān)聯(lián)并且準(zhǔn)備好接收媒體數(shù)據(jù)時(shí)
mediaSource.addEventListener('sourceopen', () => {
// MIME類型字符串，指定了將要添加到MediaSource對(duì)象中的媒體流格式
const mime = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
//創(chuàng)建一個(gè)新的源緩沖區(qū)用于保存即將播放的媒體數(shù)據(jù)。
const sourceBuffer = mediaSource.addSourceBuffer(mime);
// 視頻數(shù)據(jù)
const data = new ArrayBuffer([...]);
//視頻內(nèi)容二進(jìn)制數(shù)據(jù)追加到剛才創(chuàng)建好的源緩沖區(qū)
sourceBuffer.appendBuffer(data);
});
此時(shí)，視頻就可以正常播放了。要想做到流式播放，只需要不停的調(diào)用 appendBuffer 喂音視頻數(shù)據(jù)就行了
但不禁有疑問， ‘video/mp4; codecs=“avc1.42E01E, mp4a.40.2”’ 這段字符串什么意思？怎么來的？
這段字符串描述了視頻的相關(guān)參數(shù)，如封裝格式、音/視頻編碼格式以及其他重要信息。
詳細(xì)介紹
● 前半部分的 video/mp4 表示這是 mp4 格式的視頻；
● 后半部分的 codecs 描述了視頻的編碼信息，它是由一個(gè)或多個(gè)由 , 分隔的值組成，其中每個(gè)值又由一個(gè)或多個(gè)由 . 分割的元素組成：
○ avc1 表示視頻是 AVC（即H264）編碼;
○ 42E01E 由（16進(jìn)制表示的）三個(gè)字節(jié)構(gòu)成，描述了視頻的相關(guān)信息：
■ 0x42 （AVCProfileIndication）表示視頻的Profile，常見的有 Baseline/Extended/Main/High profile等；
■ 0xE0 （profile_compatibility）表示編碼級(jí)別的約束條件；
■ 0x1E （AVCLevlIndication）表示H264的level，表示最大支持的分辨率、幀率、碼率等；
○ mp4a 表示某種 MPEG-4 音頻；
○ 40 是由MP4注冊(cè)機(jī)構(gòu)指定的ObjectTypeIndication（OTI），0x40 對(duì)應(yīng) Audio ISO/IEC 14496-3 (d)標(biāo)準(zhǔn)；
○ 2 表示某種音頻OTI，mp4a.40.2 表示 AAC LC。
前端有什么方法直接取到視頻的 MIME TYPE 呢？
對(duì)于 mp4 格式的可以使用： mp4box ，獲取方式如下：
import MP4Box from 'mp4box';
export function getMimeType (buffer) {
return new Promise<string>((resolve, reject) =>
//創(chuàng)建了一個(gè)新的 MP4Box 文件對(duì)象實(shí)例。
const mp4boxfile = MP4Box.createFile();
//當(dāng) mp4boxfile 實(shí)例準(zhǔn)備好后
//觸發(fā) onReady 事件，并調(diào)用此處指定的回調(diào)函數(shù)
//回調(diào)接收到文件信息作為參數(shù)，
//并把其中 MIME 類型信息作為 Promise 的成功結(jié)果返回。
mp4boxfile.onReady = (info) => resolve(info.mime);
mp4boxfile.onError = () => reject();
(buffer).fileStart = 0;
mp4boxfile.appendBuffer(buffer);
});
}
實(shí)現(xiàn)流程圖
文章來源：http://www.zghlxwxcb.cn/news/detail-791159.html
MSE在其中扮演了buffer流的管理及橋接工作，因?yàn)镸SE支持的是fmp4格式，所以對(duì)于mp4文件我們需要在加載隊(duì)列之后進(jìn)行一個(gè)軟編解碼。綜上所述，實(shí)現(xiàn)流程如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-791159.html
- 編寫加載器loader，請(qǐng)求 mp4 視頻數(shù)據(jù)。
- 編寫解析器將 mp4 視頻數(shù)據(jù)進(jìn)行流處理等 。
- 將解復(fù)用的視頻數(shù)據(jù)轉(zhuǎn)成 fmp4 格式并傳遞給 MediaSource。
- 通過createObjectURL將MediaSource與 video 進(jìn)行關(guān)聯(lián)，完成播放。
5.
到了這里，關(guān)于基于MSE實(shí)現(xiàn)web前端視頻預(yù)加載的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
