您可以通过多种方式向网页添加媒体内容。您之前学习了如何使用标准 <video> 标记。在本文中，您将了解一些可用媒体框架（或库），您可以使用这些框架扩展或替换默认 HTML5 视频播放器的行为。
媒体框架既有专有框架，也有开源框架，其核心是一组 API，可支持各种容器格式和传输协议的音频和/或视频播放。优质的框架具有模块化架构，并提供清晰详细的文档。理想情况下，它还应相对容易设置和使用。您可能会问自己：“既然 HTML5 视频播放器已经提供了大多数功能，那么我为什么还要使用框架或库？”这是一个好问题，我们来深入了解一下。
使用框架的好处
在大多数情况下，如果超出了基本网页的需求，您将需要使用媒体框架来提供内容。除非您准备好开发和维护丰富的功能集（例如离线播放、在线播放、分析、画中画、预览缩略图、嵌入和创收功能，例如填充率优化、广告投放时间安排或标头出价等），否则您可能应该将这些复杂性转移到现有解决方案。
这时，媒体框架就派上用场了。它们为您提供了一组功能以及使用这些功能的条件，然后您必须决定哪个框架适合您的项目。在下一篇文章中，我们将讨论如何构建支持离线流式传输的 PWA，以实现多项复杂功能。温馨提示，这项工作量很大，而且还远远没有达到可投入生产的解决方案的标准。使用框架，避免麻烦。
有很多选项可供选择，本文将重点介绍 Shaka Player、JW Player 和 Video.js 这三个选项。
Shaka Player
根据文档，Google 的 Shaka Player 是一个适用于自适应媒体的开源 JavaScript 库。它可以在浏览器中播放自适应媒体格式（例如 DASH 和 HLS），而无需使用插件。相反，Shaka Player 使用开放 Web 标准 MediaSource Extensions 和 Encrypted Media Extensions。
Shaka Player 还支持使用 IndexedDB 离线存储和播放媒体。内容可存储在任何浏览器中。许可的存储取决于浏览器支持。
如需了解基本用法，请访问 Shaka Player 文档网站。不过，简而言之，若要使用 Shaka Player，您首先需要创建一个包含视频或音频元素的 HTML 网页。然后，在应用的 JavaScript 中，安装 polyfill 并检查浏览器支持情况。浏览器确认支持 Shaka Player 后，脚本会创建一个 Player 对象来封装媒体元素、监听错误，然后加载清单文件。接下来由 Shaka Player 接手。
使用 Shaka 时，您需要自行托管和编码媒体文件。创建媒体服务器并不复杂，但编码/转码媒体可能既耗时又复杂。您可能需要将此部分转移到 Zencoder、Amazon Elastic Encoder 或 Google Transcoder API 等服务，以自动执行重复性任务并加快处理速度。
Shaka Player 的一大优势在于，它还提供了一款非常出色的工具和媒体封装 SDK，名为 Shaka Packager，可用于 DASH 和 HLS 封装和加密。它可以准备和打包媒体内容以进行在线流式传输，您之前在媒体转换和媒体加密中了解过相关内容。
JW Player
如果您正在寻找提供托管和编码/转码服务的选项，不妨考虑 JW Player，但请注意，JW Player 是专有软件。也就是说，您无法对平台或路线图进行太多控制。该插件提供免费的基本版本（视频会带有水印）和商业版本。
JW Player 支持使用 MPEG-DASH（仅限付费版本）、数字版权管理 (DRM)（使用 Vualto）、互动广告、界面自定义和嵌入进行流式传输。提供有充分文档的 API 和 SDK。不过，如果您只是想快速免费地托管媒体内容，则嵌入 YouTube 视频通常是最佳的免费选项。
Video.js
根据其网站的说法，Video.js 是专为 HTML5 世界从头开始构建的。它支持 HTML5 视频和新型在线播放格式（例如 DASH 和 HLS），以及 YouTube 和 Vimeo。它支持在桌面设备和移动设备上播放视频，并且采用基于 CSS 的皮肤，在任何设备上都能呈现出出色的外观。
您可以通过多种方式使用 Video.js，但最简单的方法是使用 Fastly 提供的免费 CDN 版本。如需详细了解如何设置播放器，请访问使用入门页面。Video.js 是一款功能强大的视频播放器，与 Shaka Player 非常相似，您还需要托管和编码视频。不过，插件系统有一个不同之处，您可以在其中执行各种操作，例如在可自定义的 Video.js 播放器中播放 YouTube 视频。
其他框架
有许多不同的框架和库可供使用，本文仅介绍了其中的一部分。选择框架时，您应考虑项目需要哪些功能，以及您计划如何托管和编码或转码媒体。您需要前贴片广告还是其他创收策略？您的媒体内容能否离线使用？您的预算是多少？或者任何其他考虑因素。进行研究，并向您的人脉寻求建议。还有许多其他不错的选择。在做出任何选择之前，请花些时间选择适合您团队的选项，避免在项目生命周期内产生不必要的技术债务或维护复杂性。
接下来，您将了解我们构建的支持离线播放的 PWA，以便了解如何仅使用 HTML5 视频对象（而无需框架来处理繁重工作）来构建自己的解决方案，并应对与此相关的主要挑战。