在本文中，您将了解高级的媒体概念。 并且最终应该对 流式传输使用场景、协议和扩展程序。我们先从 解释了什么是流式传输。
媒体流式传输是一种通过 部分。而不是加载单个文件，如果不针对以下特征进行优化，加载速度可能会很慢 播放器会读取清单文件 拆分为多个单独的数据块。媒体块稍后会动态拼接 并且在运行时可能以不同的比特率重新组合在一起。在本课程中，您将学习 。
请注意，要在您的网站上提供流式传输
必须支持 Range HTTP 请求标头。详细了解Accept-Ranges
<video>中的和 <source>标签一文。
流式传输用例
不生成媒体块和描述流的必要清单
虽然简单明了，但流式传输也带来了一些有趣的应用场景，
不可能仅通过指向 <video> 元素来实现
一组静态源文件。在本单元的稍后部分中
向网页添加媒体。首先，您需要了解
如果您想更进一步
将多个文件加载到 <video> 元素中。
- 自适应流式传输是指媒体块以多个 比特率以及适合客户端设备的最高画质媒体块 将当前可用的带宽返回给媒体播放器。
- 直播是指对媒体块进行编码并以 实时更新。
- 注入媒体是指将广告等其他媒体注入到 而无需播放器更改媒体来源。
流式传输协议
网络上最常用的两种流式传输协议是动态协议 基于 HTTP 的自适应流式传输 (DASH) 和 HTTP Live Streaming (HLS)。 支持这些协议的播放器将提取生成的清单文件 确定要请求哪些媒体块，然后将它们合并到最终的 媒体体验。
使用 <video> 播放直播
许多浏览器都不会以原生方式播放您的视频流。虽然有一些
原生支持 HLS 播放，浏览器通常不支持原生 DASH
在线播放。这通常意味着，仅指向 <source> 是不够的
将 <video> 元素添加到清单文件中。
<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>而言，它从网址接收媒体数据。 - 生成的网址只是一个指向
MediaSource实例的指针。 MediaSource实例会创建一个或多个SourceBuffer实例。- 然后，我们只需将二进制媒体数据附加到缓冲区中，例如使用
fetch。
尽管这些基本概念很简单，但还是可以编写一个 从零开始兼容 DASH 和 HLS 的视频播放器，大多数人通常会选择其中一种 一些成熟的开源解决方案，例如 Shaka Player， JW Player 或 Video.js 等。
不过，我们创建了一个名为 Kino 的演示版 Media PWA，
或者尝试开发你自己的基本流媒体网站，
离线媒体播放。<video>有计划
纳入我们的路线图，以支持相关框架和数字版权管理，
功能。因此，请不时回来查看更新，或提出功能请求。
如需了解详情，请参阅支持离线流式传输的 PWA 文章。
媒体块格式
长期以来，DASH 和 HLS 都需要以不同的方式对媒体块进行编码 格式。但在 2016 年，此功能将支持标准的碎片化 MP4 (fMP4) 文件 向 HLS 添加了 HLS，DASH 也支持这种格式。
支持使用 fMP4 容器和 H.264 编解码器的视频块
同时支持这两种协议，并且可供绝大多数玩家玩。这样，
内容制作者只需对视频进行编码一次，从而节省了时间
和磁盘空间。
为了获得更好的质量并减小文件大小，您可能需要选择
使用更高效的格式（如 VP9）对多组媒体块进行编码，
不过在继续讲解之前
准备适用于网络的媒体文件，接下来请做这方面的事。