您可以通过多种方式向网页添加媒体。之前，您学习了如何使用标准 <video> 标记。在本文中，您将了解一些可用于扩展或替换默认 HTML5 视频播放器行为的媒体框架（或库）。
媒体框架分为专有和开源两种形式，其核心是一组支持各种容器格式和传输协议的音频和/或视频播放的 API。一个好的框架具有模块化架构，并提供清晰而详细的文档。理想情况下，它的设置和使用也相对容易。您可能会问自己：“如果 HTML5 视频播放器已经提供了大部分功能，那么我为什么要使用框架或库呢？”这个问题问得好，我们来深入了解一下吧。
使用框架的好处
在大多数情况下，如果超出基本网页的需要，您需要使用媒体框架来传送内容。除非您准备好开发和维护丰富的功能集，例如离线播放、流式传输、分析、画中画、预览缩略图、嵌入，以及创收功能（如填充率优化、广告投放时间设置或标头出价等），那么您可能应该将这种复杂性交给现有解决方案。
这正是媒体框架的用武之地。它们为您提供了一系列功能，以及这些功能的使用条件，然后您必须确定哪个框架适合您的项目。在下一篇文章中，我们将讨论如何构建支持离线流式传输的 PWA 来实现多项复杂功能。提前剧透，你需要做大量工作，但远远不能成为生产就绪型解决方案。不妨使用一个框架，无需担心这些问题。
可供选择的选项有很多，目前本文将重点介绍三个选项，即 Shaka Player、JW Player 和 Video.js。
Shaka 玩家
根据相关文档，Google 的 Shaka Player 是一个适用于自适应媒体的开源 JavaScript 库。它可以在浏览器中播放自适应媒体格式（例如 DASH 和 HLS），而无需使用插件。而是使用开放 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 的一大优点是，还有一个名为 Shaka Packager 的出色工具和媒体打包 SDK，用于 DASH 和 HLS 打包和加密。它可以为在线流式传输准备和打包媒体内容，您先前在媒体转换和媒体加密中对此有所了解。
JW 播放器
如果您要寻找提供托管和编码/转码服务的方案，可以考虑使用 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 视频对象（没有框架来处理繁重工作）发布您自己的解决方案所面临的主要挑战。