我正在使用video.js插件并有一个视频介绍,在我的网站加载时播放。它的工作原理是在页面加载后立即自动播放,并且它位于一个 div 容器中,该容器是 z 索引的并覆盖在我的主页上。
我将 jquery 设置为 delay()
,然后 fadeOut()
将 div 设置为显示我的主页。
理论上很好,只是每个人都有不同的连接速度,并且 fadeOut()
经常发生得太早或太晚。
当视频停止时,有没有办法fadeOut()
我的div?
这是我的 jQuery:
$(document).ready(function() {
$("#overlay-video").delay(10000).fadeOut('slow');
});
编辑:我也刚刚尝试了以下方法,但这也不起作用:
$(document).ready(function(){
$("#movie-id").bind('ended', function(){
alert("planet earth");
});
});
感谢您的回复,我的 HTML 如下所示:
<div id="overlay-video">
<!-- Begin Video.js -->
<video id="movie-id" class="video-js vjs-default-skin alignleft" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload="auto" autoplay data-setup="{}">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"' />
</video>
<!-- End Video.js -->
</div>
我的 jQuery 正在工作,因为我可以很好地淡出视频元素。
最佳答案
几件事:
- 只有一个
doc.ready
主页上的所有脚本都需要 fxn - 使用
on()
方法(使用 jQuery 1.7+) - 最重要的是,
fadeOut()
需要在on('ended')
内功能
作为一般的 HTML5 <video>
解决方案,这应该有效:http://jsfiddle.net/trpeters1/XzCMb/1/
$(document).ready(function(){
$("#movie-id").on('ended', function() {
console.log('im done');
$("#overlay-video").delay(10000).fadeOut('slow');
});
});
但是,Video-js 似乎需要调用 video.js 对象,因此请执行以下操作:http://help.videojs.com/discussions/questions/509-videojs-and-passing-an-event-at-the-end-of-the-video
_V_("#movie-id").ready(function(){ //note the different selector for the ready() fxn
this.addEvent("ended", function(){ //adding "ended" event to video-js object
{ console.log('im done');
$("#overlay-video").delay(10000).fadeOut('slow');
}
});
});
关于javascript - SEO 友好的 HTML5 视频 (video.js) 介绍,带有叠加淡出功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10491384/