如何为每个视频设置 videojs 当前时间

Question

对于客户端，我需要制作一个包含 3 个视频的功能视频播放列表。我已经让它们单独播放了，但现在我需要制作一个自定义跳过按钮。我尝试了几件事，但我不断收到控制台错误"el.currentTime 不是函数"，"this.currentTime 不是函数"。

我试图在其他形式上找到一些解决方案，但实际上每个人都在制作带有id的视频播放器。我想防止这种情况以保持我的代码灵活。

$('video').each(function (i, el) {
var p = $(el).parent();
$('.forward-btn', p).click(function () {
console.log("this video is skipped 5 seconds in" + el);
el.currentTime(el.currentTime() + 10);
});
});
});

Answer 1

您在这里遇到的问题是，您实际上并没有在这些播放器上初始化 Videojs，因此您没有使用对 Videojs 实例的引用，而只是一个video标签。

您可以在使用这些方法之前将video标记引用传递给 videojs 构造函数，也可以改用本机 HTML5currentTime属性库器。

// If you want to use the Videojs methods:
$('video').each(function (i, el) {
var vjsEl = videojs(el);
// ...
});
// Or, you can keep things as is and just use the `currentTime` attribute directly
console.log("this video is skipped 5 seconds in" + el);
el.currentTime = el.currentTime + 10; // notice this isn't a function.

如果您采用 Videojs 构造函数路线，还请记住，您需要确保在从 DOM 中删除视频标签之前清理播放器(dispose(。

对于它的价值，以防万一你没有遇到它，有一个维护良好的 videojs 播放列表插件。您需要记住使用多个video标签 + Videojs 实例对性能的影响(特别是对于大型播放列表(，因此至少您可能需要查看它们的实现。