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