媒体框架

Derek Herman
Derek Herman

您可以通过多种方式向网页添加媒体。之前,您学习了如何使用标准 <video> 标记。在本文中,您将了解一些可用于扩展或替换默认 HTML5 视频播放器行为的媒体框架(或库)。

媒体框架分为专有和开源两种形式,其核心是一组支持各种容器格式和传输协议的音频和/或视频播放的 API。一个好的框架具有模块化架构,并提供清晰而详细的文档。理想情况下,它的设置和使用也相对容易。您可能会问自己:“如果 HTML5 视频播放器已经提供了大部分功能,那么我为什么要使用框架或库呢?”这个问题问得好,我们来深入了解一下吧。

在大多数情况下,如果超出基本网页的需要,您需要使用媒体框架来传送内容。除非您准备好开发和维护丰富的功能集,例如离线播放、流式传输、分析、画中画、预览缩略图、嵌入,以及创收功能(如填充率优化、广告投放时间设置或标头出价等),那么您可能应该将这种复杂性交给现有解决方案。

这正是媒体框架的用武之地。它们为您提供了一系列功能,以及这些功能的使用条件,然后您必须确定哪个框架适合您的项目。在下一篇文章中,我们将讨论如何构建支持离线流式传输的 PWA 来实现多项复杂功能。提前剧透,你需要做大量工作,但远远不能成为生产就绪型解决方案。不妨使用一个框架,无需担心这些问题。

可供选择的选项有很多,目前本文将重点介绍三个选项,即 Shaka PlayerJW PlayerVideo.js

Shaka 玩家

根据相关文档,Google 的 Shaka Player 是一个适用于自适应媒体的开源 JavaScript 库。它可以在浏览器中播放自适应媒体格式(例如 DASHHLS),而无需使用插件。而是使用开放 Web 标准 MediaSource ExtensionsEncrypted Media Extensions

Shaka Player 还支持使用 IndexedDB 离线存储和播放媒体。内容可以存储在任何浏览器中。许可的存储取决于浏览器支持。

Shaka Player 文档网站上提供了基本用法的说明。 不过,简而言之,若要使用 Shaka Player,您首先需要创建一个包含视频或音频元素的 HTML 网页。然后在应用的 JavaScript 中安装 polyfill 并检查浏览器是否支持相应文件。浏览器确认支持 Shaka Player 后,脚本将创建一个 Player 对象来封装媒体元素、监听错误,然后加载清单文件。Shaka Player 接着就接手了

使用 Shaka,您需要自行托管媒体文件并对其进行编码。创建媒体服务器不会过于复杂,但对媒体进行编码/转码可能既耗时又复杂。您可能需要将此部分分流到 ZencoderAmazon Elastic EncoderGoogle 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 视频对象(没有框架来处理繁重工作)发布您自己的解决方案所面临的主要挑战。