Video.js 博客

Steve Heffernan2014-05-20

Video.js 4.6.0 版本发布!这是一个富有成效的月份。

Video.js 社区最近全面发力,并且它带来了许多出色的功能和修复,包括 UI 更新、更友好的错误消息,甚至由 Addy Osmani 本人构建的 Video.js Polymer 元素

新的直播 UI

Video.js 支持各种形式的直播视频已有一段时间,但最近的更新使用户体验更加清晰。具体来说,一个LIVE徽章会添加到控制条,并且在不允许快进时,进度条会隐藏。

更清晰的错误提示

在改善开发者和观看者可能遇到的错误情况方面投入了大量精力。如果观看者的浏览器既不支持 JavaScript 也不支持 HTML5 视频,则会显示一条更有用的消息,告知观看者如何支持视频播放。

在发生常见媒体错误(例如文件不存在或网络故障)的情况下,一个X图标会显示出来,表明播放不能继续,并且会显示一条描述问题的消息。此外,错误消息会记录到 JavaScript 控制台。

对于开发者,已添加了更好的日志记录功能,包括 videojs.log.error(),并且它们正在整个代码库中使用,以提供更好的信息并帮助追踪问题。

IE11 全屏

即使在使用 Flash 时,Video.js 也依赖于浏览器的原生全屏功能。IE11 是首个支持原生浏览器全屏的 Internet Explorer 版本,Video.js 现已更新,以利用该功能并为这些用户提供更好的全屏体验。

播放速率切换

如果您曾想加速或减慢视频播放速度,现在可以了!HTML5 视频浏览器一直在增加对播放速率切换的支持,Video.js 现在有一个可选的 UI 组件,可以让你选择速度。然而,Flash 不支持播放速率切换,所以很遗憾地是它不是老旧浏览器(例如 IE8)用户可以使用的功能。

查看演示。

新的社区插件

已添加到 video.js 插件列表的最新插件。

  • videojs-vr:将视频投影到不同的几何形状(球体、立方体、圆柱体)上,并支持可选的 Oculus Rift 以 3D 方式查看
  • video-speed:添加可自定义的视频速度控制
  • OpenVideoAnnotation - 使用 annotator 在 video-js 中创建注释
  • videojs-overlay:在视频播放期间显示简单的 HTML 叠加层
  • video.js-polymer:一个用于 Polymer Web 组件框架的 video.js 元素

如果你想为新的 video.js 插件开发打个提前量,可以查看 Yeoman video.js 插件生成器

更改日志中的完整列表

  • 更新了 UI 以支持直播视频(查看
  • UI 现在在源更改后重置(查看
  • 现在为滑块采用智能 CSS 默认值,以防止播放器初始化时的回流(查看
  • 修复了菜单中标题元素的位置(查看
  • 修复了菜单按钮的标题支持(查看
  • 修复了由某些应用程序而非用户在 Windows 上导致的额外 mousemove 事件(查看
  • 修复了当不支持任何源时由于未定义技术而导致的错误(查看
  • 修复了使用手动 timeupdate 事件时进度条无法完成的问题(查看
  • 为非 HTML5 浏览器添加了更具信息性和样式的回退消息(查看
  • 添加了提供子组件数组而非对象的选项(查看
  • 修复了 webkitRequestFullscreen 的大小写问题(查看
  • 使移动设备上的点击事件对触摸移动不那么敏感(查看
  • 修复了字幕/副标题轨道的默认标志(查看
  • 修复了 LESS v1.7.0 和 GRUNT v0.4.4 的编译失败问题(查看
  • 在整个库中添加了更好的错误处理(查看
  • 更新了字幕/副标题文件获取功能,以支持旧版 IE 浏览器中的跨域请求(查看
  • 添加了对播放速率切换的支持(查看
  • 修复了 loadstart 事件顺序导致大播放按钮不隐藏的问题(查看
  • 现代化了全屏 API 并添加了对 IE11 的支持(查看
  • 添加了使用 SauceLabs 进行跨浏览器测试,并增加了 Karma 作为默认测试运行器(查看
  • 修复了 SauceLabs 集成以在 TravisCI 的提交上运行(查看
  • 当技术未定义时,添加了更清晰的错误消息(查看
  • 在字体图标中添加了一个齿轮图标(查看
  • 添加了一个播放器选项,用于调整字幕/副标题的时间偏移(查看

新版本已在 videojs.com 上提供,并已添加到 CDN。

此致,

-heff