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 つ目 - ビデオを終了すると、適切に停止してフェードアウトしますが、再生をもう一度押すと、ビデオはフェードインしますが、再生されません。コントロールは表示されますが、機能せず、画面が黒くなります。終了は引き続き機能し、プレーヤーは適切にフェードアウトします。
同様の問題がここで報告されましたが、解決策はありません。