前言
当前网页上能够搜到的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的浏览器就相当于内置了一个能够解析流协议的播放器，流媒体格式文件在播放器中经过的处理流程如下图所示。
图片来源自[总结]视音频编解码技术零基础学习方法，对视音频编码相关内容有所疑问的同学可以点上述链接。