有几种方法可以向网页添加媒体。之前您学习了如何使用标准的 <video> 标签。在本文中，您将了解一些可用的媒体框架（或库），您可以使用它们来扩展或替换默认 HTML5 视频播放器的行为。
媒体框架有专有和开源两种类型，它们的核心是一组 API，支持各种容器格式和传输协议的音频和/或视频播放。一个好的框架应具有模块化架构，并提供清晰详细的文档。理想情况下，它还应该相对容易设置和使用。您可能会问自己，“如果 HTML5 视频播放器已经提供了大多数功能，那么我为什么要使用框架或库？” 这是一个很好的问题，让我们深入探讨一下。
使用框架的优势
在大多数超出基本网页需求的情况下，您将需要使用媒体框架来提供您的内容。除非您准备好开发和维护丰富的功能集，例如离线播放、流媒体、分析、画中画、预览缩略图、嵌入以及获利（例如填充率优化、广告排期或标头竞价等），否则您可能应该将这种复杂性卸载到现有的解决方案。
这就是媒体框架的用武之地。它们为您提供一组功能以及可以使用这些功能的条件，然后您必须决定哪个框架适合您的项目。在下一篇文章中，我们将讨论我们如何构建一个带有离线流媒体的 PWA，该 PWA 实现了几个复杂的功能。剧透一下，这需要大量的工作，并且离投入生产就绪的解决方案还差得很远。为了避免麻烦，请使用框架。
有很多选项可供选择，目前本文将重点介绍三个，分别是 Shaka Player、JW Player 和 Video.js。
Shaka Player
根据文档，谷歌的 Shaka Player 是一个用于自适应媒体的开源 JavaScript 库。它在浏览器中播放自适应媒体格式（例如 DASH 和 HLS），而无需使用插件。相反，Shaka Player 使用开放 Web 标准 MediaSource Extensions 和 Encrypted Media Extensions。
Shaka Player 还支持使用 IndexedDB 对媒体进行 离线存储和播放。内容可以存储在任何浏览器上。许可证的存储取决于浏览器的支持。
在 Shaka Player 文档站点上有 基本用法 的说明。但是，简而言之，要使用 Shaka Player，您首先需要创建一个包含视频或音频元素的 HTML 页面。然后在您的应用程序的 JavaScript 中，您安装 polyfills 并检查浏览器支持。一旦浏览器确认支持 Shaka Player，脚本将创建一个 Player 对象来包装媒体元素，监听错误，然后加载清单文件。Shaka Player 将从那里接管。
使用 Shaka，您将需要自行托管和编码您的媒体文件。创建媒体服务器并非过于复杂，但是，编码/转码媒体可能既耗时又复杂。您可能希望将这部分工作卸载到诸如 Zencoder、Amazon Elastic Encoder 或 Google Transcoder API 之类的服务，以自动化重复性任务并加快处理速度。
关于 Shaka Player 的伟大之处在于，还有一个非常出色的工具和媒体打包 SDK，用于 DASH 和 HLS 打包和加密，名为 Shaka Packager。它可以准备和打包用于在线流媒体的媒体内容，您在之前的 媒体转换 和 媒体加密 中学习了相关内容。
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 视频对象而不使用框架来处理繁重工作的主要挑战。