Question

我有一个带有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，但没有解决方案。

Answer 1

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

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

1 个答案: