Video.js 博客

Gary Katsevman2018-02-01

Video.js 6.7.1 发布

Video.js 6.7.1 于本周发布。距首次 6.6.0 发布(我们忘了撰写博客文章)已有一个半月,距最新补丁发布(6.6.3,现在是最新版本)仅一周。

6.7 带来了两项出色的新功能和一些辅助工具

  • 一个可用的 playerresize 事件
  • 一种新的中间件调解器类型
  • getPlayergetAllPlayers 辅助函数在 videojs 上。

Netlify

最近,我们还将所有在线资产切换到在 Netlify 上运行。这很棒,因为它通过 Let's Encrypt 为我们提供了 HTTPS,而且还允许我们更好地自动化网站、文档网站和博客。由于文档网站与 Video.js 主仓库绑定,并且每个 PR 都有一个构建,我们还让 Netlify 根据沙盒示例为 PR 生成一个示例页面。这里是最近一个 PR 的示例页面。

playerresize

每当播放器大小调整时,这个新事件都会触发。它将在进入全屏、退出全屏、通过尺寸方法调整播放器大小,或者当播放器处于流体模式且窗口大小调整时触发。它在 Chrome 64 及任何可用之处使用新的 ResizeObserver。如果不可用,可以传入一个 polyfill,或者它将使用其备用方案。备用方案使用一个绝对定位的隐藏 iframe,其大小与播放器相同,然后在一个防抖处理程序上重新触发 iframe 的 resize 事件。另外,我想指出的是,resize 播放器事件并非指播放器本身的大小,而是指当 videoHeight 或 videoWidth 发生变化时触发的原生 resize 事件

中间件的调解器类型

这是中间件自 6.0 发布以来的第一个主要功能。调解器的主要原因是为了让中间件能够取消对 play() 的请求。因此,它们目前仅限于 play()pause() 调用。一旦我们确定了细节,我们希望为进一步的功能启用它。调解器中间件允许你拦截对调解器方法(如 play())的调用,然后阻止这些调用在技术层面上发生。这对于 play() 等方法很重要,因为虽然在 play() 之后立即调用 pause() 可能成功“取消”播放,但在某些情况下也会产生一些意外的副作用。调解器中间件可以决定 play() 是否应该通过,从而消除了调用 pause() 的需要。之后,所有中间件都将收到通知,告知调用是否已终止,或者将获得返回值。对于 play() 的情况,它将是播放 Promise 本身。

这是一个简单示例

videojs.use('*', (player) => ({
  setSource(src, next) {
    next(null, src);
  }

  callPlay() {
    // return this value to terminate the method call
    return videojs.middleware.TERMINATOR;
  }

  play(terminated, playPromise) {
    if (terminated) {
      return console.error(terminated, 'play was terminated');
    }

    playPromise
    .then(() => console.log('play succeeded!'))
    .catch(() => console.log('play failed :('));
  }
});

播放器辅助函数

这些旨在让你更容易管理播放器并减少意外的副作用。很多时候,播放器是自动通过 data-setup 创建的,但随后要通过代码引用它时,会调用 videojs()。在某些情况下,这实际上会初始化播放器,因为它最终在自动设置之前运行。现在,可以使用 videojs.getPlayer() 来代替,它永远不会创建播放器。这是在播放器创建后获取播放器的首选方式。videojs.getAllPlayers() 只是获取当前页面上所有可用播放器列表的一种好方法。

提交者

原始更新日志

## [6.7.1](https://github.com/videojs/video.js/compare/v6.7.0...v6.7.1) (2018-01-31)

错误修复

  • middleware: 在调解器方法中进行空值检查 (#4913) (7670db6)
# [6.7.0](https://github.com/videojs/video.js/compare/v6.6.3...v6.7.0) (2018-01-30)

功能

  • getPlayer 方法添加到 Video.js。 (#4836) (a15e616)
  • 添加 videojs.getAllPlayers 以获取播放器数组。 (#4842) (6a00577)
  • play() 添加调解器中间件类型 (#4868) (bf3eb45)
  • 在所有情况下触发 playerresize 事件 (#4864) (9ceb4e4)

错误修复

  • 不在 Android Chrome 上修补 canplaytype (#4885) (f03ac5e)

杂项

文档

  • 更新 COLLABORATOR_GUIDE.md 和 CONTRIBUTING.md 以包含标签含义 (#4874) (a345971)

测试

  • 将项目和构建名称添加到 browserstack (#4903) (41fd5cb)