前言

當(dāng)前網(wǎng)頁上能夠搜到的HTML5和MSE相關(guān)的內(nèi)容一抓一大把，本文的目的是盡量用較短的篇幅，簡述瀏覽器為何要使用HTML5的MSE擴展。這也是在我最開始接觸有關(guān)內(nèi)容時的最大的疑惑，希望對大家有所幫助，如存在錯誤，請大家指正。

相關(guān)術(shù)語

W3C：World Wide Web Consortium，是網(wǎng)絡(luò)相關(guān)主要的國際標(biāo)準(zhǔn)組織，推出了一系列影響重大的標(biāo)準(zhǔn)：HTML、CSS、XML、SVG等等，大家請記住這個組織，互聯(lián)網(wǎng)發(fā)展到今天這個程度，該公司功不可沒。

HTML5：是W3C推出的HTML（超文本標(biāo)記語言）的最新版本，網(wǎng)頁就是搭建在HTML語言之上的，說明網(wǎng)頁中包含了哪些內(nèi)容；當(dāng)我們提及HTML5技術(shù)的時候，其實包含了HTML5、CSS、JavaScript：其中CSS負責(zé)頁面布局，JavaScript負責(zé)與用戶的交互。

MSE：Media Source Extension，媒體源擴展是為了讓HTML5支持流媒體操作（在用戶層面就是播放）的一個標(biāo)準(zhǔn)。在計算機領(lǐng)域，標(biāo)準(zhǔn)一詞和技術(shù)、解決方案都是等價的。

正文內(nèi)容

以往用戶在瀏覽網(wǎng)頁內(nèi)容尤其是視頻內(nèi)容時，需要使用像Adobe Flash或是微軟的Silverlight這樣的插件，播放視音頻內(nèi)容即使是電腦小白也知道，需要媒體播放器的支持，前面提到的插件就是起到媒體播放器的作用。但是使用插件這樣的方式是很不便捷且很不安全的，一些不法分子會在這些插件上動手腳。因此W3C的最新的HTML5標(biāo)準(zhǔn)中，定義了一系列新的元素來避免使用插件，其中就包含了<video>標(biāo)簽這一大名鼎鼎的元素。

正是使用了<video>標(biāo)簽，支持HTML5的瀏覽器得以實現(xiàn)無插件就原生支持播放媒體內(nèi)容，但是對媒體內(nèi)容的格式有所限制。說到媒體內(nèi)容，就自然地需要談到媒體的封裝格式和編碼格式，這里總結(jié)一下，原視頻文件通過編碼來壓縮文件大小，再通過封裝將壓縮視音頻、字幕組合到一個容器內(nèi)，具體內(nèi)容請大家自行查閱。

我們可以把<video>標(biāo)簽看做擁有解封裝和解碼功能的瀏覽器自帶播放器。隨著視頻點播、直播等視頻業(yè)務(wù)的發(fā)展，視頻通過流媒體傳輸協(xié)議（目前常用的有兩種，MPEG-DASH和Apple的HLS）從服務(wù)器端分發(fā)給客戶端，媒體內(nèi)容進一步包含在一層傳輸協(xié)議中，這樣<video>就無法識別了。以HLS為例，將源文件內(nèi)容分散地封裝到了一個個TS文件中，如下圖所示，圖片來源于網(wǎng)絡(luò)，侵刪。

僅靠<video>標(biāo)簽無法識別這樣的TS文件，那么就引入了MSE拓展來幫助瀏覽器識別并處理TS文件，將其變回原來可識別的媒體容器格式，這樣<video>就可以識別并播放原來的文件了。那么支持HTML5的瀏覽器就相當(dāng)于內(nèi)置了一個能夠解析流協(xié)議的播放器，流媒體格式文件在播放器中經(jīng)過的處理流程如下圖所示。

圖片來源自[總結(jié)]視音頻編解碼技術(shù)零基礎(chǔ)學(xué)習(xí)方法，對視音頻編碼相關(guān)內(nèi)容有所疑問的同學(xué)可以點上述鏈接。

總結(jié)

以上是生活随笔為你收集整理的粗识 HTML5 video 标签和MSE媒体源扩展的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。