首页 文章

暂停后,Videojs无法播放,在ipad上淡出

提问于
浏览
1

我有一个带有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 回答

  • 2

    我有一个类似的问题 . 我通过调整不透明度来解决问题 . 当您调用 display: none; / display: block; 时,某些浏览器会进行一些重置 . 我想我也遇到过firefox这个问题 . 另一个选择是将高度设置为0%,以使外观消失 . 希望能指出你正确的方向 .

相关问题