如何为每个视频设置videojs currentTime

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构造函数，或改为使用本机HTML5 currentTime attribute设置器。

currentTime

如果走Videojs构造函数路线，请记住，在从DOM删除视频标签之前，需要确保清理播放器（

// 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.

）。>>

对于它的价值，以防万一您没有发现它，有一个维护良好的dispose插件。您需要牢记使用多个videojs-playlist标签+这样的Videojs实例（特别是对于较大的播放列表）对性能的影响，因此至少您可能要看看它们的实现。 >