Web 视频播放前前后后那些事(1)，html注释标签

这是因为当时没有其他方法可以在浏览器上流式传输视频。作为用户，您可以选择安装Flash或Silverlight之类的第三方插件，还是根本无法播放任何视频。

为了填补这个空白，WHATWG 开始研究 HTML 标准的新版本，其中包括本地的视频和音频播放。苹果公司在其产品上禁用 Flash 后，这一趋势更加明显。而该标准后面成为现在的 HTML5 的标准。

因此，HTML5除其他新的标签外，将 <video> 标签带到当前 Web。

这个新标签允许您直接从HTML链接到视频，就像标签对图像所做的一样。

但是从媒体网站的角度来看，使用简单的类似于 img 的标记似乎不足以替代我们的优质Flash：

• 我们可能想即时切换多种视频质量（例如YouTube）以避免缓冲问题

• 直播是另一个用例，看起来很难实现

• 像Netflix一样，在内容流式传输时根据用户的喜好更新内容的音频语言又如何呢？

值得庆幸的是，由于HTML5规范带来的好处，所有这些问题都可以在大多数浏览器上以本地方式解决。本文将详细介绍当今的技术是如何做到的。

Video 标签

如前文所述，在HTML5中，链接到页面中的视频非常简单。您只需在页面中添加具有很少属性的视频标签即可。

HTML 将允许您的页面直接在支持相应编解码器的任何浏览器上播放some_video.mp4。

类似像这样：

HTML5 视频标签还提供了各种API，例如播放，暂停，搜索或更改视频播放的速度。

这些API可通过JavaScript直接访问：

//pause the video

myVideo.pause()

// seek to 10 seconds

myVideo.currentTime = 10;

但是，我们今天在网络上看到的大多数视频显示的行为比上面说的的行为复杂得多。例如，在视频质量和直播流之间切换将会非常麻烦。

所有这些网站实际上仍然使用video标签。但是，它们不只是在src属性中设置视频文件，而是使用功能更强大的Web API（Media Source Extensions）。

Media Source Extensions

“Media Source Extensions”（通常简称为“ MSE”）是 W3C 的一种规范，当今大多数浏览器都在实现。它的创建是为了直接使用 HTML 和 JavaScript 允许那些复杂的媒体使用案例。

这些“扩展”将 MediaSource 对象添加到 JavaScript。顾名思义，这将是视频的源，或更简单地说，这是代表我们视频数据的对象。

如前文所述，我们仍然使用 HTML5 视频标签。也许更令人惊讶的是，我们仍然使用它的 src 属性。仅这次，我们不添加视频链接，我们正在添加一个链接到 MediaSource 对象。

您可能对最后一句话感到困惑。我们在这里不是在讨论URL，而是在讨论 JavaScript 语言的抽象概念，如何将其称为 HTML 中定义的视频标签上的 URL？

为了允许这种用例，W3C定义了 URL.createObjectURL 静态方法。该API允许创建一个URL，该URL实际上将不引用在线可用资源，而是直接引用在客户端上创建的JavaScript对象。

因此，这是将MediaSource附加到视频标签的方式：

const videoTag = document.getElementById(“my-video”);

// creating the MediaSource, just with the “new” keyword, and the URL for it

const myMediaSource = newMediaSource();

const url = URL.createObjectURL(myMediaSource);

// attaching the MediaSource to the video tag

videoTag.src = url;

就是这样！现在，您已经知道流媒体平台如何在 Web 上播放视频！

… just kidding。所以现在有了 MediaSource，但是我们应该怎么做呢？

MSE规范不止于此。它还定义了另一个概念，即SourceBuffers。

Source Buffers

视频实际上并没有直接“推送”到 MediaSource 中进行播放，而是使用 SourceBuffers。

MediaSource 包含一个或