iPad 1は、ビデオの再生が終了する前にビデオ終了イベントを発生させます。

Question

ビデオ要素とナビゲーションメニューがあるコンテナがあります。ビデオの再生が終了するまで、ナビゲーションは表示されず、その時点でビデオが非表示になり、ナビゲーションが表示されます。これは、デスクトップ上で完全に動作します。しかし、iPadでは、「終了した」イベントが明らかに終了する前にビデオの再生が終了しません。

また、iOSのビデオ要素を自動再生できないため、ビデオの開始後にコントロールを非表示にするための再生イベントも検出されます。私はこれを残しました、誰かがそれが引き起こす問題を知っている場合に備えて。それはまだそのビットを削除しても起こります。

この現象の回避策はありますか？私はこの問題について何も見つけることができませんでした。ビデオはいくらか遅れて再生され、終了したイベントは実際にどれくらいの時間がかかるかに関わらず計算された時間の後に発生しますが、これはちょうど推測ですが私が確信しているのは、終了したイベントが発生したときにビデオが再生されていないことだけです。私は手始めに

<div id="home-nav"> 
    <video autoplay controls width="870" height="489" id="home-video"> 
     <source src="home_1.mp4" type="video/mp4" /> 
    </video> 
    <div id="nav-overlay"> 
     <a class="link" href="#">Link 1</a> 
     <a class="link" href="#">Link 2</a> 
     <a class="link" href="#">Link 3</a> 
     <a class="link" href="#">Link 4</a> 
    </div> 
</div><!-- /home-nav --> 

$(function(){ 
    var overlay = $('#nav-overlay'); 
    var homevideo = $('#home-video'); 
    overlay.hide(); 
    homevideo.bind('ended', function(){ 
     homevideo.hide(); 
     overlay.show(); 
    }); 
    homevideo.bind('play', function(){ 
     homevideo[0].removeAttribute("controls"); 
     homevideo[0].currentTime = 0.1; 
    }); 
}); 

Answer 1

のiOS 5のSafariを実行しているiPadの1にテストしてい、バインドが推奨されていません。 on（）に切り替えます。

$(function(){ 
    var overlay = $('#nav-overlay'); 
    var homevideo = $('#home-video'); 
    overlay.hide(); 

    homevideo.on('ended', function(){ 
     $(this).hide(); 
     overlay.show(); 
    }); 

    homevideo.on('play', function(){ 
     $(this).removeAttribute("controls"); 
     $(this).get(0).currentTime = 0.1; 
    }); 
}); 

これを試してください。