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 中的显示设置为无。当用户单击按钮时，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() 在淡入后在回调中不起作用。在回调之外，就像上面的代码一样，它确实开始正常播放。

第二 - 当您退出视频时，它会停止并正确淡出 - 但是当您第二次按下播放时，视频会淡入但不会播放。控件可见但不工作并且屏幕为黑色。退出仍然有效，并且播放器正确淡出。

这里报告了一个类似的问题，但没有解决方案。

4

1 回答 1

2

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

于 2013-08-06T09:06:16.177 回答