Video.js 7.4
是时候回顾一下 Video.js 7.4 了,它于 12 月初首次发布。此版本最大的新功能是允许您在直播流中进行时间定位的用户界面。我们更新了 focus-visible 以使其与我们的菜单配合使用,添加了更多翻译,为播放/暂停按钮添加了重播选项,以及许多许多修复,其中多项与可访问性相关。
我们还在构建过程中放弃了 Grunt 的使用。我们非常感谢 Grunt,因为它为我们提供了很好的服务,但现在是时候继续前进了。
Video.js 7.4.1 是目前的最新版本,而 7.4.2 作为预发布版本将在下周发布。
鸣谢
在继续之前,我谨向所有参与者表示感谢,我们非常感谢您的贡献!共有14位首次贡献者,我认为这对我们来说是历史新高,我希望这能继续下去!
- @BrandonOCasey
- @gesinger
- @gjanblaszczyk (首次贡献者!)
- @valse (首次贡献者!)
- @gstrat88
- @eranshmil (首次贡献者!)
- @carlmorris (首次贡献者!)
- @bartlomein (首次贡献者!)
- @DanielRuf (首次贡献者!)
- @Quenty31 (首次贡献者!)
- @fketchakeu (首次贡献者!)
- @OwenEdwards
- @alex-barstow
- @vitaliytv (首次贡献者!)
- @oaprograms (首次贡献者!)
- @xjoaoalvesx (首次贡献者!)
- @webdeveloperpr (首次贡献者!)
- @smbea (首次贡献者!)
- @dustin71728 (首次贡献者!)
直播用户界面
Video.js 一直以来都支持直播流,无论是原生支持,还是通过 videojs-http-streaming (VHS) 支持。然而,此用户界面非常简洁,它禁用了进度条,并且基本上只允许暂停,尽管有一个指示器显示这是一个直播流。

新的用户界面与之前的直播用户界面和常规控制栏非常相似。“直播”指示器会移到进度条的右侧,并指示我们是在实时播放还是落后于实时。点击此按钮将定位到“直播点”。时间显示和工具提示将相对于直播点显示时间;因此,直播点的当前时间将显示为 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)
杂项任务
文档
## [7.4.1](https://github.com/videojs/video.js/compare/v7.4.0...v7.4.1) (2018-12-11)错误修复
- 可访问性: 使用 VoiceOver 改进当前时间和持续时间显示的无障碍性 (#5653) (8932611), 解决了 /www.w3.org/TR/html-aam-1.0/#details-id-124
- 可访问性: 修复进度条中隐藏的控制文本 (修复 #5251) (#5655) (70a71ae)
- 可访问性: 改进“定位到直播点”功能对屏幕阅读器用户的提示 (#5651) (165c120)
- 语言: 追加 UKR 翻译并修复检查翻译命令 (#5642) (b7aafdc)
- 语言: 改进 sv 语言文件 (#5673) (b9d8744)
- 语言: 更新 sr.json (#5657) (98b4a1c)
- 直播UI: 放宽边缘检测,并为选项添加文档 (#5661) (dce4a2c)
- 直播UI: 定位到直播点应即时生效及其他调整 (#5650) (831961b)
- 包: 更新 @videojs/http-streaming 到 1.5.1 版本 🚀 (#5658) (8c9702a)
杂项任务
- 包: 更新 autoprefixer 到 9.4.2 版本 (#5647) (19f3465)
- 包: 更新 rollup-plugin-node-resolve 到 4.0.0 版本 🚀 (#5666) (d07b6c2)
文档
测试
# [7.4.0](https://github.com/videojs/video.js/compare/v7.3.0...v7.4.0) (2018-12-03)功能
- 为 PlayToggle 组件添加“重播”选项。(#5531) (f178458), 解决了 #4802
- 语言: 添加奥克西唐语区域设置 (#5578) (0fb637d)
- 语言: 添加威尔士语/Cymraeg (cy) 翻译 (#5561) (b2c1077)
- 语言: 将语言 JSON 文件复制到 dist 目录 (#5549) (eb5de19), 解决了 #5092
- 播放器: 添加 playerreset 事件 (#5335) (0e5442f)
- 使菜单背景遵循 :focus-visible 样式 (#5558) (e5e1e29)
- 响应式字幕设置 (#5534) (b67fe27)
- 通过 liveui 选项支持在直播播放期间进行时间定位 (#5511) (2974ad3)
错误修复
- 为播放/暂停切换按钮添加正确的指针光标 (#5463) (aed337a)
- 默认字幕未启用 (#5608) (8329e64)
- 音轨: 如果未设置语言,则不根据用户偏好选择音轨 (#5556) (c1cbce3), 解决了 #5553
- 在时间变化前不移除 vjs-waiting 类 (#5533) (0060747)
- 语言: 添加俄语“正在加载”翻译 (#5630) (0090b75)
- 语言: 奥克西唐语:单复数协调 (#5602) (4842201)
- 包: 更新 @videojs/http-streaming 到 1.4.2 版本 🚀 (#5543) (dbaca33)
- 包: 更新 @videojs/http-streaming 到 1.5.0 版本 🚀 (#5587) (d95ef6f)
- 持续时间重置,并允许持续时间显示为 NaN 或 0 (#5348) (ab0e29a), 解决了 #5347
- 鼠标悬停在音量滑块上后,音量滑块未内联显示 (#5503) (7d127c8), 解决了 #5502 #5505
- 当不再悬停在菜单按钮上时,vjs-lock-showing 类会从菜单中移除。(#5465) (58f638e), 解决了 #1690
杂项任务
- 使用 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)
- 包: 更新 conventional-changelog-cli 到 2.0.11 版本 (#5552) (f236176)
- 包: 更新 grunt-cli 到 1.3.2 版本 (#5550) (2d27b6a)
- 包: 更新 husky 到 1.1.3 版本 (#5551) (937e2bf)
- 包: 更新 npm-run-all 到 4.1.5 以移除 event-stream (#5614) (3e52c4f)
- 包: 更新 remark-stringify 到 6.0.1 版本 (#5539) (d46828a)
- 包: 更新 rollup 到 0.67.1 版本 (#5580) (209d9f9)
- 包: 更新 videojs-generate-karma-config 到 5.0.0 版本 🚀 (#5595) (2162239)
- 播放器: 修复注释的 lint 错误 (#5588) (b5e6bdc)
- travis: 移除未使用的秘密变量 (#5577) (15beea7)