Videojs.com

Video.js 博客

Gary Katsevman2019-01-11

Video.js 7.4

是时候回顾一下 Video.js 7.4 了，它于去年12月初首次发布。此版本最大的新功能是一个允许您在直播期间进行快进/快退操作的用户界面。我们更新了 focus-visible 以使其与我们的菜单配合使用，增加了更多翻译，为播放/暂停按钮添加了重播选项，并进行了许多修复，其中多项与无障碍功能相关。

我们还在构建过程中放弃了 Grunt 的使用。我们非常感谢 Grunt，因为它为我们提供了很好的服务，但现在是时候继续前进了。

Video.js 7.4.1 是目前的最新版本，而 7.4.2 作为预发布版本将在下周发布。

致谢

在继续之前，我谨向所有参与者表示感谢，我们非常感谢您的贡献！共有14位首次贡献者，我认为这对我们来说是历史新高，我希望这能继续下去！

直播界面

Video.js 已经支持直播流一段时间了，无论是通过原生方式还是通过 videojs-http-streaming (VHS)。然而，这个界面非常简约，它禁用了进度条，并且基本上只允许暂停，尽管有一个指示器表明这是一个直播流。

Video.js, with the new Live UI, playing a live stream
Video.js，使用新的直播界面，播放直播流

新界面与之前的直播界面和常规控制栏非常相似。“直播”指示器会移动到进度条的右侧，并指示我们是在实时播放还是落后于实时。点击此按钮将跳转到“实时点”。时间显示和工具提示将显示相对于实时点的时间；因此，实时点的当前时间将显示为 0，如果您向后快退30秒，则会显示 -00:30。

此功能仍处于实验阶段，因此，它由一个默认关闭的选项控制。我们希望您能尝试并向我们提供反馈，以便我们可以在未来的版本中默认启用它。

要启用此功能，请在播放器中传入 liveui: true：在 JavaScript 中

var player = videojs('my-id', {
  liveui: true
  }
);

或 HTML

<video-js id="my-id" data-setup='{"liveui": true}'}>
  <source src="https://example.com/live.m3u8" type="application/x-mpegurl">
</video-js>

语言

在 7.4 版本系列中，我们增加了许多语言并进行了更新。此外，我们现在将 JSON 文件复制到 dist/lang 文件夹中，以便您更轻松地将其包含在您的项目中。

新增和更新的语言

  • 奥克语 (oc)
  • 俄语 (ru)
  • 威尔士语/康瓦尔语 (cy)
  • 乌克兰语 (uk)
  • 塞尔维亚语 (sr)
  • 瑞典语 (sv)

无障碍功能

一如既往，我们致力于使 Video.js 尽可能地易于访问和使用。为此，我们在这些版本中进行了一系列与无障碍功能相关的修复。

  • 使用 VoiceOver 的时间显示无障碍功能
  • 移除进度条中隐藏的控制文本
  • 使跳转到实时点按钮能正确地向屏幕阅读器报告其自身
  • 使剩余时间显示中的 - 仅供视觉显示，而不能被屏幕阅读器读取

其他功能更新

响应式字幕设置对话框

这使用了新的 responsive 设置和断点，使对话框能够根据播放器的大小进行响应，从而改善用户体验。

播放切换按钮的重播选项

当视频结束时，播放切换按钮会将图标更改为重播图标，大多数用户不介意这一点，并且这曾是一个备受请求的功能。此选项允许将其关闭。

焦点可见菜单背景

与其他按钮的轮廓一样，我们使用不同的背景颜色来表示菜单中的焦点。我们应该像处理按钮轮廓一样，在那里也遵守焦点可见的规则。

playerreset 事件

当播放器通过 reset() 方法重置时，它现在会触发一个 playerreset 事件，以告知组件和用户。

其他修复

  • 修复全屏事件触发两次的问题 (7.4.2)
  • 播放切换按钮的鼠标指针
  • 在 loadedmetadata 而非 loadstart 时选择默认字幕
  • 如果未设置语言，则不要将用户偏好应用于字幕
  • 确保 vjs-waiting 仅在我们再次开始播放时才被移除
  • 允许将持续时间设置为 NaN，使 Video.js 更符合规范
  • 修复按下菜单按钮时菜单锁定问题
  • 将子组件移动到新父级时，从旧父级中移除该子组件
  • 视频结束后快进时移除 vjs-ended
  • 鼠标悬停时不要自动隐藏控制栏

7.4.0、7.4.1 和 7.4.2 的完整更新日志

## [7.4.2](https://github.com/videojs/video.js/compare/v7.4.1...v7.4.2) (2019-01-08)

错误修复

  • 控制栏在光标悬停时自动隐藏 #5258 (#5692) (6ebc772)
  • CSS 动画简写属性顺序 (#5687) (0e69ce9)
  • fs: 确保只有一个 fullscreenchange 事件 (#5686) (2bc90a1)，关闭 #5685
  • lang: 添加 liveui 组件使用的瑞典语翻译 (#5704) (f38726e)
  • package: 将 @videojs/http-streaming 更新到 1.6.0 版本 🚀 (#5705) (3d093ed)
  • player: 在跳转后移除 vjs-ended 类 (#5728) (f1637cd)，关闭 #5654
  • 剩余时间显示: 使 '-' 仅供视觉显示，而不能被屏幕阅读器读取 (#5671) (05513f8)，关闭 #5168
  • 进度条: 如果实时跟踪器的可快进范围为无限，则不要禁用 (#5721) (7f507df)
  • 通过 addChild 将子组件移动到新父级时，从旧父级中移除该子组件 (#5702) (8a3e2a7)

杂项

文档

  • 直播界面: 添加直播界面和直播 API 指南 (#5677) (c147581)
## [7.4.1](https://github.com/videojs/video.js/compare/v7.4.0...v7.4.1) (2018-12-11)

错误修复

杂项

  • package: 将 autoprefixer 更新到 9.4.2 版本 (#5647) (19f3465)
  • package: 将 rollup-plugin-node-resolve 更新到 4.0.0 版本 🚀 (#5666) (d07b6c2)

文档

  • 移除 grunt 并更新构建脚本的使用方式 (#5656) (62f9e78)

测试

  • 验证播放器和控制栏子组件设置为 false 时的空值检查 (#5670) (13b42ad)
# [7.4.0](https://github.com/videojs/video.js/compare/v7.3.0...v7.4.0) (2018-12-03)

功能

错误修复

杂项

  • 修复使用 lint-staged 预提交时的 lint 错误，使用 npm-merge-driver (#5591) (be9e9a9)
  • 修复 travis 构建 (#5627) (6c1056b)，关闭 #5626 #5616
  • 将 a11y、lang、browserify 和 webpack 从 grunt 移出 (#5589) (db6e376)
  • 将复制、压缩和清理任务移至 npm 脚本 (#5544) (2d682a4)
  • 移除 grunt 并移至 npm 脚本 (#5592) (d72786f)
  • 从 cross-var 切换到 cross-env (#5600) (ab740bc)
  • 切换到 videojs-generate-karma-config (#5528) (2e70450)
  • 将所有开发依赖更新到最新版本 (#5645) (db1369a)，关闭 #5644 #5643
  • 更新依赖，移除 coveralls，修复审计问题 (#5555) (11f1fb8)
  • 在 index.html 中使用相对 URL (#5586) (dec31e4)
  • netlify: 使文档正确构建 (#5636) (a8828cd)
  • package: 将 conventional-changelog-cli 更新到 2.0.11 版本 (#5552) (f236176)
  • package: 将 grunt-cli 更新到 1.3.2 版本 (#5550) (2d27b6a)
  • package: 将 husky 更新到 1.1.3 版本 (#5551) (937e2bf)
  • package: 将 npm-run-all 更新到 4.1.5 版本以移除 event-stream (#5614) (3e52c4f)
  • package: 将 remark-stringify 更新到 6.0.1 版本 (#5539) (d46828a)
  • package: 将 rollup 更新到 0.67.1 版本 (#5580) (209d9f9)
  • package: 将 videojs-generate-karma-config 更新到 5.0.0 版本 🚀 (#5595) (2162239)
  • player: 修复注释的 linting 问题 (#5588) (b5e6bdc)
  • travis: 移除未使用的秘密变量 (#5577) (15beea7)

文档