我正在编写一个交互式视频(一种游戏),用户在侧面板上进行操作,并且操作发生在视频中。
对于一部分来说,视频正在等待用户在面板上执行操作,因此它必须循环播放,直到用户启动该操作。
所以在 15 秒时,只要用户没有做出动作,我就会回到 11 秒,视频被设计为完美循环。
我的循环正在工作,但问题是它不是无缝的。在 15 秒处,它停止了大约一秒钟,然后在 11 秒处重新开始。有没有办法让它无缝运行?
我正在使用VideoJS。这是我的代码:
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);
}
});
实现无缝循环的最简单方法是使用完整长度的视频并等待“结束”事件返回到开头。这往往非常顺利,所以如果你能以某种方式实现这一点那就最好了。
获取视频的一个子部分并循环它很困难,因为浏览器不会每毫秒触发“timeupdate”事件,而且这样做效率非常低。相反,它们每 15 (Chrome/Safari) 或 250 (Firefox) 毫秒触发一次 timeupdate,所以这就是您的误差范围。您可以创建自己的定时器(setInterval)以较小的间隔并手动检查时间,但这可能会给浏览器带来沉重的负担。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)