Pat O'Neill2022-08-22Video.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 平台的用户来说，也有一些值得关注的变更。
贡献者
在我们深入探讨软件变更之前，开源离不开**人**。非常感谢为这些版本提交拉取请求的每个人！
- @alex-barstow
- @Essk
- @gesinger
- @gjanblaszczyk
- @gkatsev
- @harisha-swaminathan
- @hugorogz
- @KangXinzhi
- @kchang-brightcove
- @mister-ben
- @misteroneill
- @phloxic
- @roman-bc-dev
变更内容？
Video.js
完整的 CHANGELOG 可用，但以下是一些亮点：
- 不再转译为 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
完整的 CHANGELOG 可用，但以下是一些亮点：
- 不再转译为 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.dom | DOM 函数（以前可用） |
videojs.fn | 函数...函数 |
videojs.num | 数字函数 |
videojs.obj | 对象函数 |
videojs.str | 字符串函数 |
videojs.time | 时间相关函数 |
videojs.url | URL 相关函数 |
注意：有关从 Video.js 7.x 迁移到 8.x 的详细信息，请参阅我们的迁移指南！
结论
再次感谢所有贡献者以及每天使用 Video.js 来支持它的广大开发社区！
如果您想为 Video.js 做出贡献，可以从 GitHub 上的CONTRIBUTING指南开始。
祝您一切顺利，并创造出伟大的作品！
