HTML5视频，视频内无缝循环 [英] HTML5 video with seamless loop within video

问题描述

我正在编写一个交互式视频（一种游戏），用户在侧面板上进行操作，并在视频中执行操作。

I am programming an interactive video (kind of game) where the user make actions on a side panel and actions happens in the video.

对于某个部分，视频正在等待面板上的用户操作，因此必须循环直到用户启动操作。

For a part, the video is waiting for user action on the panel, so it has to loop until the action has been launch by the user.

所以在15秒时，我回到11只要用户没有做出动作，视频就会被设计成一个完美的循环。

So at 15 seconds, I get back to 11 seconds as long as the user has not made the action, video is designed to be a perfect loop.

我的循环正在运行，但问题是它不是无缝的。在15秒时，它会停止一秒钟，然后在11秒后重新开始。有没有办法使它无缝工作？

My loop is working, but the problem is thats it's not seamless. At 15 seconds, it stops for like a second, and then starts back at 11 seconds. Is there a way to make it work seamless?

我正在使用VideoJS。这是我的代码：

I am using VideoJS. Here is my code:

var video_decor = _V_("video_decor");
video_decor.addEvent("timeupdate", function(){
    var whereYouAt = video_decor.currentTime();
    console.log(whereYouAt);
    if(whereYouAt > 15){
        video_decor.currentTime(11);
    }
});

推荐答案

进行无缝循环的最简单方法是使用一个完整的视频，等待'已结束'的事件回到开头。这往往非常顺利，所以如果你能做到这一点，那就是最好的方式。

The easiest way to do a seamless loop is by using a full length video and waiting for the 'ended' event to go back to the beginning. That tends to be pretty smooth, so if you can make that happen some how that'd be best.

拍摄视频的子部分并将其循环很困难，因为浏览器不会每毫秒触发'timeupdate'事件，并且它实际上效率很低这样做。相反，它们每15（Chrome / Safari）或250（Firefox）毫秒触发timeupdate，这就是你的误差范围。你可以创建一个较小间隔的自己的计时器（setInterval）并手动检查时间，但这可能会给浏览器带来沉重负担。

Taking a sub-section of the video and looping it is difficult, because browsers don't trigger the 'timeupdate' event every millisecond, and it would be really inefficient to do so. They instead trigger timeupdate every 15 (Chrome/Safari) or 250 (Firefox) milliseconds, so that's your margin of error. You could potentially create your own timer (setInterval) for a smaller interval and check the time manually, but that could put a heavy load on the browser.

这篇关于HTML5视频，视频内无缝循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！