我正在构建一个简单的 php 页面,该页面使用 HTML5 视频和 jQuery 绑定函数来播放视频播放列表,以便在当前视频结束后淡入和播放下一个视频。
将函数绑定到结束的事件效果很好,但我想在视频结束前 20 秒触发淡入和播放功能(比如说)。
但我似乎无法弄清楚如何让这种魔法发生。这甚至可能吗?
我的 HTML:
<video controls preload="auto">
<source src="sequence01.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
<video controls preload="auto">
<source src="sequence01.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
我的 jQuery:
$('video').bind("ended", function(){
$(this).fadeOut(20000).next().fadeIn(20000).get(0).play();
});
解决了!
$('video').on('timeupdate', function(event) {
var current = Math.round(event.target.currentTime * 1000);
var total = Math.round(event.target.duration * 1000);
if ( ( total - current ) < 20000 ) {
$(this).fadeOut(2000).next().fadeIn(2000).get(0).play();
}
});
非常感谢大家的帮助,我能够使用您的精彩评论和其他看似无关的 SO 帖子拼凑出一个答案:
未捕获的类型错误:对象 [object Object] 没有方法“addEventlistner”
如果有人有一种更简洁的方式将它们组合在一起,那就太棒了,但这对于我的目的来说似乎工作得很好。