Video.js 博客

Gary Katsevman2018-10-29

Video.js 7.3:响应式布局、填充模式、createLogger

又一个月过去了,Video.js 发布了新版本:v7.3.0。此版本带来了期待已久的功能:响应式布局。此外,填充模式已被提升为一级功能,并添加了 createLogger 以便调试和日志记录更加容易。

这目前是一个预发布版本,大约一周后将提升为最新版本。请试用并报告您发现的任何问题

感谢

我要感谢所有参与本次版本发布变更的人。任何和所有变更都非常感谢。

响应式模式

响应式模式将使播放器根据其大小调整 UI 组件。它使用了 Video.js v6.7.0 中添加的 playerresize 事件,这使我们能够知道播放器何时改变大小。

响应式模式会在播放器大小改变时设置和更改某些断点类,例如 vjs-layout-small。这些可以进行配置。根据播放器当前所在的类,控制条和其他 UI 元素可以进行调整。例如,在 vjs-layout-small 模式下,时间控件将不显示,因为进度条上的时间工具提示可用且字幕按钮更重要。在更大的尺寸下,两者都可以正常显示。

您可以在我们的文档页面中找到如何启用响应式模式以及更多信息。在仓库的 sandbox 文件夹中也有一个示例演练场。

填充模式

填充模式允许 Video.js 播放器动态调整大小,但仍保持在父容器的边界内。这类似于流体模式,但有时容器已经正确调整了大小。

填充模式并非全新模式,vjs-fill 类在 Video.js 中已经存在了一段时间。这最终使其成为与流体模式并列的一级功能。

createLogger

这是 videojs.log 上的一个新方法,允许您创建一个带有特定名称的新日志记录器。然后它会创建一个名称链,以便更容易追踪是哪个组件记录了这条特定消息。特别是,这可以帮助插件作者记录消息,然后只筛选出与其插件相关的消息。

createLogger 返回一个与 videojs.log 具有相同 API 的函数。您可以在下方看到其应用。

示例

添加了一个新方法 player.log,它在后台使用 createLogger。除了 VIDEOJS 外,它还会记录播放器 ID

var player = videojs('myid');

player.log('foo');
// VIDEOJS: myid: foo

您还可以进一步创建一个子日志记录器

var player = videojs('myid');
var mylog = player.log.createLogger('my-plugin');

mylog.log('foo');
// VIDEOJS: myid: my-plugin: foo

如果您想为您的自定义插件记录警告或错误

var player = videojs('myid');
var mylog = player.log.createLogger('my-plugin');

mylog.log.warn('foo');
// VIDEOJS: myid: my-plugin: WARN: foo

mylog.log.error('bar');
// VIDEOJS: vid1: my-plugin: ERROR: bar