前言

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

相關術語

W3C：World Wide Web Consortium，是網絡相關主要的國際標準組織，推出了一系列影響重大的標準：HTML、CSS、XML、SVG等等，大家請記住這個組織，互聯網發展到今天這個程度，該公司功不可沒。

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

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

正文內容

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

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

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

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

圖片來源自[總結]視音頻編解碼技術零基礎學習方法，對視音頻編碼相關內容有所疑問的同學可以點上述鏈接。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。