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() は、フェードインした後、コールバック内では機能しません。上記のコードのように、コールバック外で使用すると、適切に再生が開始されます。

2 つ目 - ビデオを終了すると、適切に停止してフェードアウトしますが、再生をもう一度押すと、ビデオはフェードインしますが、再生されません。コントロールは表示されますが、機能せず、画面が黒くなります。終了は引き続き機能し、プレーヤーは適切にフェードアウトします。

同様の問題がここで報告されましたが、解決策はありません。

4

1 に答える 1