iPadでwebkitfullscreenchangeイベントが発生しない

Question

iPad用のビデオコントロールを作成中です。ユーザーがボタンをクリックすると、ビデオが再生され、直ちにフルスクリーンになります。ユーザーが[Exit fullscreen]ボタンをクリックすると、動画を一時停止します。 「Exit fullscreen」ボタンを無効にして、ユーザーに「完了」ボタンを使用させてもらうことはできますが、それはオプションではないようです。

私の問題は、webkitfullscreenchangeイベントがiPadで発生しないようです。これは、デスクトップ上のChromeで完璧に動作します。私は、iPadのブラウザは、メタデータがロードされていない場合（iPadでビデオが再生されるまでロードされない - プリロードは無視されます）、あなたのイベントを実行しませんが、メタデータがロードされていることを確認しましたフルスクリーンイベントが発生しています。誰かがwebkitfullscreenchangeイベントがiPad上で発射されない理由についてのアイデアはありますか？

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".jqVidLink").click(function(e) { 
      e.preventDefault(); 
      var vidId = $(this).attr("name"); 
      playPause(document.getElementById(vidId)); 
    }); 
    $(".jqVideo").each(function() { 
     this.addEventListener("webkitfullscreenchange", function(){ 
      alert("hi2"); //never fires 
      if (document.webkitIsFullScreen == false) { 
       playPause(this); 
      } 
     }, false); 
     this.addEventListener("loadedmetadata", function() { 
      alert("hi"); //firing 
      this.webkitEnterFullscreen(); 
     }, false); 
    }); 
}); 

function playPause(myVideo) { 
    if (myVideo.paused){ 
     myVideo.play(); 

    } 
    else 
     myVideo.pause(); 
    } 

Answer 1

新しいIE6のiPadを呼び出す記事のことを思い出します。 iOSブラウザがデスクトップのサファリのように動作するとは思わないでください。回避策として、 を使用すると、ビデオをインラインで表示することができます（ネイティブのフルスクリーンではなく - ）。独自のコントロールを追加できます。このアプローチの欠点は、ブラウザのナビゲーションがいくつかの垂直スペースを無駄にすることです。あなたは何が起こっているかを完全に制御することができます。このアイデアに従えば、ビデオとカスタムコントロールをコンテナ内に置くことでフルスクリーンを模倣することができます。コンテナの幅と高さは100％に固定して配置する必要があります。通常の状態に戻ったときに以前のサイズを気にする必要があります。単にクラスを削除するだけです。

あなたがこれをやりたいのであれば、もう1つ注意すべき点は、iOS上のコンテナ内のJS経由でビデオノードを移動することはできません。代わりに、HTMLで完全なマークアップを提供するか、ビデオノードを複製し、元のものを取り出して、コンテナ内に複製されたものを挿入する必要があります。