我有一个带有videojs播放器的页面 .
<div id='modal-bg'>
<div id="video-exit"></div>
<div class="video-box-wr">
<video id="model_vid" class="video-js vjs-default-skin" controls poster="myposter.png" data-setup='{}'>
<source src="video.mp4" type='video/mp4'>
</video>
</div>
</div>
ID为“modal-bg”的div在css中将其显示设置为none . 当用户单击按钮时,div淡入并且视频开始播放 .
if($('#model_vid').length>0){
_V_("model_vid").ready(function() {
var video_player = this;
$("#view-video-button").click(function(){
$("#modal-bg").fadeIn(function(){
// video_player.play();
});
video_player.play();
});
$("#video-exit").click(function(){
video_player.currentTime(0);
video_player.pause();
$("#modal-bg").fadeOut();
});
});
}
适用于桌面设备(Chrome,Firefox,Safaru和IE9),但不适用于iPad(iOS 6.1.2) .
首先,在淡入后,video_player.play()在回调内部不起作用 . 如上面的代码所示,它在回调之外就可以开始正常播放 .
第二 - 当您退出视频时,它会停止并正确淡出 - 但是当您再次按下播放时,视频会淡入但不会播放 . 控件可见,但不起作用,屏幕为黑色 . 退出仍然有效并且播放器正常淡出 .
报告了类似的问题here但没有解决方案 .
1 回答
我有一个类似的问题 . 我通过调整不透明度来解决问题 . 当您调用
display: none;
/display: block;
时,某些浏览器会进行一些重置 . 我想我也遇到过firefox这个问题 . 另一个选择是将高度设置为0%,以使外观消失 . 希望能指出你正确的方向 .