Derek Herman
Jaroslav Polakovič
在本文中，您将学习媒体在线播放的更高级概念，并在结束时对各种在线播放用例、协议和扩展程序有充分的了解。首先，我们来了解一下什么是流式传输。
媒体在线播放是一种分块传送和播放媒体内容的方式。播放器会读取清单文件（而不是加载单个文件，如果未针对网络进行优化，加载速度可能会很慢），该文件描述了目标媒体如何拆分为单独的数据块。媒体块稍后会在运行时动态拼接回来，可能采用不同的比特率（稍后会介绍）。
请注意，若要在您的网站上提供在线播放功能，服务器必须支持 Range HTTP 请求标头。如需详细了解 Accept-Ranges 标头，请参阅“
流式传输用例
生成媒体分块和描述数据流的必要清单并不完全简单，但流式传输可以实现一些有趣的用例，而仅仅将
自适应流式传输是指以多个比特率编码媒体块，并将适合客户端当前可用带宽的最高质量媒体块返回给媒体播放器。
直播是指媒体分块经过编码并实时提供。
注入媒体是指将广告等其他媒体注入到直播中，而无需播放器更改媒体来源。
流式传输协议
网络上最常用的两种在线播放协议是基于 HTTP 的动态自适应流式传输 (DASH) 和 HTTP Live Streaming (HLS)。支持这些协议的播放器将提取生成的清单文件，确定要请求哪些媒体块，然后将它们合并到最终的媒体体验中。
使用
许多浏览器都不会原生播放您的直播。虽然浏览器支持 HLS 播放，但通常不支持原生 DASH 流式播放。这意味着，仅将
注意： 这段 HTML 是有效的，但实际上不起作用。浏览器不支持将添加到 src 属性的 DASH 清单播放。
看似缺点的方面实际上可能是隐藏的优势。数据流功能强大，而使用数据流的应用有不同的需求。
清单文件通常用于描述单个媒体的多个变体。例如不同的比特率、多个音轨，甚至是采用不同格式编码的同一媒体内容。
有些应用可能希望在缓冲区中保留更多视频，有些应用可能希望预加载即将播放的剧集的前几秒视频，有些应用则希望实现自己的自适应流式传输逻辑。此时，您需要某种内置的浏览器功能来生成媒体流以进行播放，而恰好有这样一种功能。
媒体来源扩展
幸运的是，W3C 定义了一种名为 Media Source Extensions (MSE) 的扩展，可让 JavaScript 生成媒体串流。简而言之，MSE 允许开发者将 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. */ )
}
);
上面的简化示例说明了以下几点：
对
生成的网址只是指向 MediaSource 实例的指针。
MediaSource 实例会创建一个或多个 SourceBuffer 实例。
然后，只需将二进制媒体数据附加到缓冲区中即可（例如使用 fetch）。
虽然这些基本概念很简单，而且我们当然可以从头开始编写一个与 DASH 和 HLS 兼容的视频播放器，但大多数人通常会选择现有的成熟开源解决方案之一，例如 Shaka Player、JW Player 或 Video.js 等。
不过，我们创建了一个名为 Kino 的媒体 PWA 演示版，演示了如何仅使用简单的
如需了解详情，请参阅支持离线播放的 PWA 一文。
媒体分块格式
长期以来，DASH 和 HLS 都要求媒体分块采用不同的编码格式。不过，在 2016 年，HLS 添加了对标准分片 MP4 (fMP4) 文件的支持，DASH 也支持此格式。
这两种协议都支持使用 fMP4 容器和 H.264 编解码器的视频块，并且大多数播放器都可以播放。这样，内容生产者只需对视频进行一次编码，从而节省时间和磁盘空间。
为了获得更高质量和更小的文件大小，您可能需要选择使用 VP9 等更高效的格式对多组媒体块进行编码，不过在继续深入之前，您需要先了解如何为 Web 准备媒体文件，下一部分将介绍相关内容。