Videojs.com

Video.js 博客

Pat O'Neill2022-08-22

Video.js 8 和 Video.js HTTP Streaming 3

注意：有关从 Video.js 7.x 迁移到 8.x 的详细信息，请参阅我们的迁移指南！

我们非常高兴地宣布 Video.js 8.0 和 Video.js HTTP Streaming (VHS) 3.0 已发布！

虽然这些版本包含许多内部清理工作，但也有一些对 Video.js 平台用户很重要的更改。

贡献者

在深入了解软件变更之前，开源离不开“人”。衷心感谢所有为这些版本提交拉取请求的贡献者！

有哪些变化？

Video.js

完整的更新日志已发布，以下是一些亮点：

  • 不再转译为 ES5 以兼容 Internet Explorer 等旧版浏览器
  • 更新至 VHS 3.0
  • 默认启用 sourceset 事件，可以使用 enableSourceset: false 关闭此功能。
  • 新增 TitleBar 组件，该组件默认不在 UI 中显示（详情请参见下方）。因此，我们默认将 BigPlayButton 组件移至播放器中央
  • addClass 和 removeClass 方法现在可以接受多个类名
  • 点击播放速率按钮现在会打开菜单，而不是直接更改播放速率
  • 已弃用许多旧的顶级实用方法，转而使用存储在对象上的实用方法（详情请参见下方）
  • 无效事件类型现在将抛出错误，而不是记录警告
  • 将 addRemoteTextTrack 的 manualCleanup 选项默认值更改为 false
  • 移除了 videojs.extend() 函数
  • 移除了 firstplay 事件
  • 移除了 retryOnError 选项，并将此行为设为默认
  • 移除了通过 createEl 方法的 props 参数设置 aria-*、role 和 type 属性的功能
  • 移除了所有与 Flash 和 SWF 相关的剩余引用和逻辑
  • 移除了对缺少 flexbox 支持的后备方案
  • 移除了 IE 特有的代码

总体而言，Video.js 的压缩和 Gzip 文件大小减少了约 3%。我们将继续寻找优化 Video.js 大小的方法。

VHS

完整的更新日志已发布，以下是一些亮点：

  • 不再转译为 ES5 以兼容 Internet Explorer 等旧版浏览器。
  • 为了更具包容性，进行了命名更改（例如，“master”改为“main”，“blacklist”改为“exclude”，“whitelist”改为“include”）。
  • 立即跳过检测到的间隔，而不是等待间隔时长后再跳过。
  • 移除了已弃用的 smoothQualityChange 方法。
  • 改进了遇到 output-restricted 事件处理时的行为。
  • 清理了 excludePlaylist 的参数。

总体而言，VHS 的压缩和 Gzip 文件大小减少了约 4%。我们将继续寻找优化 VHS 大小的方法。

浏览器/设备支持

通过这些版本，我们新的浏览器/设备目标通常集中在所谓的“常青”浏览器的最近 3 个主要版本上

  • Chrome
  • Firefox
  • Safari
  • Edge (Chromium 版，非旧版)

然而，Video.js 不仅用于桌面和移动网页，还用于智能电视或 OTT 设备等更多场景，因此我们为基于 Chromium 53 及更高版本的浏览器设定了额外的最低支持阈值。这使得以下设备获得支持：

新增 Video.js TitleBar 组件

新的 TitleBar 组件将在播放器顶部显示一个 UI 元素，用于显示当前媒体的标题和/或描述。如果未提供标题或描述，TitleBar 将不会显示。

使用 loadMedia 填充 TitleBar

提供标题和/或描述最简单的方法是使用播放器的 loadMedia 方法

player.loadMedia({
  artist: 'Disney',
  album: 'Oceans',
  title: 'Oceans',
  description: 'Journey in to the depths ... and race with dolphins at play.',
  poster: 'https://vjs.zencdn.net/v/oceans.png',
  src: [{
    src: 'https://vjs.zencdn.net/v/oceans.mp4',
    type: 'video/mp4'
  }, {
    src: 'https://vjs.zencdn.net/v/oceans.webm',
    type: 'video/webm'
  }]
})

如果您不熟悉 loadMedia 方法，它是一种除了 src 方法之外，为您的媒体提供额外元数据的方式。如您在上面示例中所见，提供了 title 和 description，它们将用于填充标题栏。

直接填充 TitleBar

TitleBar 也可以通过使用组件的 update 方法直接输入来填充

player.titleBar.update({
  title: 'Oceans',
  description: 'Journey in to the depths ... and race with dolphins at play.'
});

通过为其中一个或两个值传递空字符串，可以移除标题和/或描述

player.titleBar.update({
  title: '',
  description: ''
});

如果两者都被移除，TitleBar 将不再可见。

新增 Video.js 实用对象

随着时间的推移，videojs 命名空间已经充斥着各种各样的实用函数。我们正在引入的其中一项更改是为这些实用函数设计一个更精心的接口。

这里的指导原则是，如果一个函数感觉不像库的核心部分，但对插件和其他集成仍然有用，我们就将其作为实用对象的一部分而不是顶级函数来公开。

以下是 8.0.0 版本中附加到 videojs 的实用对象：

对象描述
videojs.browser各种用户代理检测值（之前已可用）
videojs.domDOM 函数（之前已可用）
videojs.fn函数相关方法
videojs.num数字相关方法
videojs.obj对象相关方法
videojs.str字符串相关方法
videojs.time时间相关方法
videojs.urlURL 相关方法

注意：有关从 Video.js 7.x 迁移到 8.x 的详细信息，请参阅我们的迁移指南！

总结

再次感谢所有贡献者以及每天使用 Video.js 的广大开发者社区！

如果您想为 Video.js 做出贡献，可以从我们 GitHub 上的贡献指南开始。

祝您一切顺利，创造伟大成就！

下一篇 >