popcorn.js开始和停止时间

Question

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

我有30秒的赛道,

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

有人知道这是否可行,因为我在文档中找不到它？

无论是那个或者是否有命令跳转到时间线中的某个点,所以几乎就像

pop.playAt('2 second');

这样的事情？

谢谢

Answer 1

这里有两个简单的步骤:1)将视频推进到2秒钟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秒(250ms).所以你可能会看到视频运行了几帧.(例如,它可能会在27.1秒停止).如果您需要更高的准确度,请使用frameAnimation选项,这使爆米花尝试更新高达60fps(每16ms).

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

您还可以通过告知浏览器仅向Web服务器询问您需要的视频部分来节省加载时间,方法是在URL中附加锚点形式的提示.

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

这取决于浏览器和Web服务器的支持,但它不会受到伤害.

编辑:实际上,不要在这里使用frameAnimation.问题是它使用requestAnimationFrame,如果您的浏览器选项卡不可见,则无法保证将调用它.它对动画有意义,但不是这里.我可能会在popcorn.js中提出修复方法.