1

刚开始查看 popcorn.js 但遇到了一些麻烦。

我有一个30秒的曲目，

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

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

无论是那个还是有一个命令可以跳转到时间线中的一个点，所以几乎就像

pop.playAt('2 second');

类似的东西？

谢谢

4

1 回答 1

5

这里有两个简单的步骤：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 上附加锚点形式的提示来告诉浏览器只向 Web 服务器询问您需要的视频部分，从而节省加载时间。

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

这取决于浏览器和 Web 服务器的支持，但不会有什么坏处。

编辑：实际上，不要在这里使用 frameAnimation 。问题是它使用requestAnimationFrame，如果你的浏览器标签不可见，你不能保证它会被调用。这对动画有意义，但不是在这里。我可能会在 popcorn.js 中提出一个解决方案。

于 2012-11-01T16:31:10.117 回答