在本文中，您将学习更高级的媒体流概念，到最后您应该对各种流媒体用例、协议和扩展有很好的理解。让我们从解释流媒体的实际含义开始。
媒体流是一种逐片交付和播放媒体内容的方式。播放器不是加载单个文件（如果未针对网络进行优化，这可能会很慢），而是读取清单文件，该文件描述了目标媒体如何拆分为各个数据块。媒体块稍后会在运行时动态地拼接在一起——可能以不同的比特率进行，您将在稍后了解这一点。
请记住，要在您的网站上提供流媒体，服务器必须支持 Range HTTP 请求标头。在《<video> 和 <source> 标记》文章中了解有关 Accept-Ranges 标头的更多信息。
流媒体用例
生成媒体块和描述流的必要清单并非易事，但流媒体解锁了一些有趣的用例，这些用例仅通过将 <video> 元素指向一组静态源文件是无法实现的。您将在后面的部分中了解有关如何将媒体添加到网页的更多信息。首先，如果您想超越仅将多个文件加载到 <video> 元素中，您应该了解一些流媒体多媒体的用例。
- 自适应流媒体是指媒体块以多种比特率编码，并将适合客户端当前可用带宽的最高质量媒体块返回给媒体播放器。
- 直播是指媒体块被编码并实时提供。
- 注入媒体是指将其他媒体（如广告）注入到流中，而无需播放器更改媒体源。
流媒体协议
Web 上最常用的两种流媒体协议是 HTTP 动态自适应流媒体 (DASH) 和 HTTP Live Streaming (HLS)。支持这些协议的播放器将获取生成的清单文件，确定要请求的媒体块，然后将它们组合成最终的媒体体验。
使用 <video> 播放流
许多浏览器不会原生播放您的流。虽然有些浏览器原生支持 HLS 播放，但浏览器通常不支持原生 DASH 流播放。这意味着通常仅将 <video> 元素中的 <source> 指向清单文件是不够的。
<video controls>
<source src="manifest.mpd" type="application/dash+xml">
</video>
看似缺点的地方实际上是伪装的优点。流媒体功能强大，而使用流媒体的应用程序有不同的需求。
清单文件通常描述单个媒体的许多变体。想想不同的比特率、多个音轨，甚至是以不同格式编码的相同媒体。
某些应用程序可能希望在缓冲区中保留大量视频，其他应用程序可能希望从即将到来的剧集中预取前几秒的视频，还有一些应用程序希望实现自己的自适应流媒体逻辑。这就是您希望拥有某种内置浏览器功能来生成媒体流以进行播放的地方，而恰好就有一个。
媒体源扩展
值得庆幸的是，W3C 定义了一种名为 媒体源扩展 (MSE) 的东西，它将允许 JavaScript 生成我们的媒体流。简而言之，MSE 允许开发人员将 MediaSource 对象附加到 <video> 元素，并使其播放任何泵入附加到 MediaSource 实例的缓冲区中的媒体数据。
基本示例
const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
'sourceopen',
() => {
const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
const buffer = mediaSource.addSourceBuffer(mimeString);
buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
}
);
上面的简化示例说明了一些事情
- 就
<video>而言，它正在从 URL 接收媒体数据。 - 生成的 URL 只是指向
MediaSource实例的指针。 MediaSource实例创建一个或多个SourceBuffer实例。- 然后我们只需将二进制媒体数据附加到缓冲区中，例如使用
fetch。
虽然这些基本概念很简单，并且从头开始编写兼容 DASH 和 HLS 的视频播放器当然是可能的，但大多数人通常会选择已经存在的成熟开源解决方案之一，例如 Shaka Player、JW Player 或 Video.js 等等。
但是，我们创建了一个名为 Kino 的演示 Media PWA，它演示了如何开发您自己的基本流媒体网站，该网站仅使用简单的 <video> 元素提供离线媒体播放。我们的路线图中有计划支持框架和数字版权管理以及其他功能。因此，请不时查看更新或请求功能。在《具有离线流媒体功能的 PWA》文章中阅读有关它的更多信息。
媒体块格式
长期以来，DASH 和 HLS 要求媒体块以不同的格式进行编码。然而，在 2016 年，HLS 添加了对标准 分段 MP4 (fMP4) 文件的支持，DASH 也支持这种格式。
使用 fMP4 容器和 H.264 编解码器的视频块受两种协议支持，并且可以被绝大多数播放器播放。这允许内容生产者仅编码一次视频，从而节省时间和磁盘空间。
为了获得更好的质量和更小的文件大小，您可能需要选择使用更高效的格式（如 VP9）来编码几组媒体块，但在我们深入了解之前，您首先需要学习如何为 Web 准备媒体文件，这是接下来的内容。