将媒体添加到网页的方法有多种。之前，您学习了如何使用标准 <video> 标记。在本文中，您将了解一些可用于扩展或替换默认 HTML5 视频播放器行为的媒体框架（或库）。
媒体框架有专有和开源两种形式，其核心是一组 API，支持针对各种容器格式和传输协议播放音频和/或视频播放。好的框架采用模块化架构，并提供清晰而详细的文档。理想情况下，它也应该相对易于设置和使用。您可能会问自己：“如果 HTML5 视频播放器已经提供了大部分功能，我为什么要使用框架或库？”这个问题问得好，我们来深入了解一下。
使用框架的优势
在大多数情况下，您可能希望使用媒体框架来提供内容，而满足基本网页的需求以外的需求。除非您已准备好开发和维护丰富的功能集（如离线播放、在线播放、分析、画中画、预览缩略图、嵌入和创收功能，例如填充率优化、广告投放时间设置或标头出价等），否则就应该将同样的复杂工作转移到现有解决方案中。
这正是媒体框架的用武之地。它们为您提供了一系列功能以及使用这些功能的条件，然后您必须确定哪种框架适合您的项目。在下一篇文章中，我们将讨论我们如何构建具有离线流式传输功能的 PWA以实现多种复杂功能。提前剧透一下，这涉及大量的工作，距离成为可直接用于生产的解决方案仍有很长的路要走。不用再为烦恼而劳神费心，不妨使用一个框架。
有很多选项可供选择，目前，本文将重点介绍三个，分别是 Shaka Player、JW Player 和 Video.js。
Shaka 播放器
根据相关文档，Google 的 Shaka Player 是一个适用于自适应媒体的开源 JavaScript 库。它可以在浏览器中播放自适应媒体格式（例如 DASH 和 HLS），无需使用插件。而 Shaka Player 则使用开放网络标准的 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 播放器的一大优点是，还有一个名为 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 播放器类似，您还需要托管和编码视频。但有一个不同之处在于插件系统。在该系统中，您可以执行在 Video.js 播放器中播放 YouTube 视频等操作，也可以对插件系统进行自定义。
其他框架
目前有很多不同的框架和库可供使用，本文只是对现有功能一些初步了解。选择框架时，您应该考虑项目需要哪些功能，以及您计划如何托管、编码或转码媒体。您是否需要前贴片广告或其他创收策略？您的媒体内容是否可供离线访问？您的预算是多少？或任何其他注意事项。做好调查，向您人际网中的人们寻求建议。还有数十种其他出色的方案，在您做出任何选择之前，请花些时间选择一个适合您的团队的方案，并避免在项目生命周期中造成不必要的技术债务或维护复杂性。
接下来，您将了解我们构建的支持离线流式传输的 PWA，演示如何处理和解决在不使用框架的情况下，只使用 HTML5 视频对象来处理繁重工作的自行开发解决方案所面临的主要挑战。