jquery - popcorn.js 开始和停止时间

Question

刚刚开始查看 popcorn.js，但遇到了一些问题。

我有一首 30 秒的轨道，

但是我希望文件从 2 秒开始播放，并在结束前 3 秒停止播放。

有谁知道这是否可能，因为我在文档中找不到它？

或者有一个命令可以跳转到时间轴中的某个点，所以几乎就像

pop.playAt('2 second');

类似的东西？

谢谢

Answer 1

这里有两个简单的步骤: 1) 将视频提前两秒 2) 确保它在 27 秒处停止 (30 - 3)

要推进视频，您可以使用 currentTime 方法，但如果您尝试在加载视频元数据之前设置 currentTime，则会遇到错误。 (当您第一次设置视频时，浏览器在获取标题之前不知道持续时间是多少，并且您无法将 currentTime 设置为晚于持续时间。)

var popcorn = Popcorn('#video');
if (popcorn.duration()) {
  popcorn.currentTime(2);
} else {
  popcorn.on('loadedmetadata', function() {
    popcorn.currentTime(2);
  }
}

现在，为了确保视频在 27 秒处停止，您可以使用“cue”方法，该方法需要几秒的时间并在那时触发回调函数。

popcorn.cue(27, function() {
  popcorn.pause();
});

现在，默认情况下，Popcorn 在从视频接收到“timeupdate”事件时会触发事件，通常每 1/4 秒(250 毫秒)一次。因此您可能会看到视频运行了几帧。 (例如，它可能会在 27.1 秒处停止)。如果您需要更高的准确性，请使用frameAnimation选项，这使得爆米花尝试更新至60fps(每16毫秒)。

var popcorn = Popcorn('#video', {
  frameAnimation: true
});

您还可以通过在 URL 中附加 anchor 形式的提示，告诉浏览器仅向 Web 服务器询问您需要的视频部分，从而节省加载时间。

http://example.com/videos/myvideo.webm#t=2,27

这取决于浏览器和网络服务器的支持，但也没什么坏处。

编辑:实际上，这里不要使用frameAnimation。问题是它使用 requestAnimationFrame，并且您不能保证如果您的浏览器选项卡不可见，它会被调用。这对于动画来说是有意义的，但在这里不是。我可能会在 popcorn.js 中提出解决方案。