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 设置和断点,使对话框能够根据播放器的大小进行响应,从而改善用户体验。

播放/暂停按钮的重播选项

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

focus-visible 菜单背景

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

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)
  • 全屏: 确保只有一个 fullscreenchange 事件 (#5686) (2bc90a1), 解决了 #5685
  • 语言: 添加了 liveui 组件使用的 sv 翻译 (#5704) (f38726e)
  • 包: 更新 @videojs/http-streaming 到 1.6.0 版本 🚀 (#5705) (3d093ed)
  • 播放器: 在定位后移除 vjs-ended 类 (#5728) (f1637cd), 解决了 #5654
  • 剩余时间显示: 使 '-' 仅为视觉显示,不可被屏幕阅读器读取 (#5671) (05513f8), 解决了 #5168
  • 进度条: 如果直播跟踪器的可定位范围是无限大,则不禁用 (#5721) (7f507df)
  • 通过 addChild 移动到新父级时,从旧父级中移除子级 (#5702) (8a3e2a7)

杂项任务

文档

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

错误修复

杂项任务

  • 包: 更新 autoprefixer 到 9.4.2 版本 (#5647) (19f3465)
  • 包: 更新 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)

功能

错误修复

杂项任务

文档