如何为每个视频设置videojs currentTime

Question

对于客户，我需要制作一个包含 3 个视频的功能性视频播放列表。我已经让他们分开玩了，但现在我需要制作一个自定义的跳过按钮。我尝试了几件事，但我不断收到控制台错误 "el.currentTime is not a function"、"this.currentTime is not a function"。

我试图在其他形式上找到一些解决方案，但实际上每个人都在制作带有 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 构造函数，或者改用本机 HTML5 currentTime attribute setter。

// 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-playlist 插件。您需要牢记使用多个 video 标签 + 像这样的 Videojs 实例对性能的影响（特别是对于大型播放列表），因此至少您可能想看看它们的实现.

如何为每个视频设置videojs currentTime

How to set videojs currentTime for each video

video

jquery

button

forward

video.js