11

通常の画面にカスタム コントロールを含むHTML5ビデオがあります。カスタム コントロールを全画面表示にしないでください。フルスクリーンでデフォルトのコントロールを表示するだけです。しかし、全画面表示を終了するときは、デフォルトのコントロールを無効にする必要があります。JavaScript または jQuery を使用して、ビデオが全画面表示モードを終了したかどうかをどのように知ることができますか?

4

4 に答える 4

13

フルスクリーンdocument.mozCancelFullScreen()のドキュメント内にいる場合にのみ、 を呼び出すことができます。つまり、 fullscreen である別のドキュメント内に含まれている場合、 mozCancelFullScreen () は内側の iframe では何もしません。外側のドキュメントだけが実際に fullscreen であるためです。つまり、外側のドキュメントでmozCancelFullScreenを呼び出すとfullscreenがキャンセルされますが、内側のドキュメントで呼び出すとキャンセルされません。

また、fullscreenmozCancelFullScreen()を元に戻して、以前のfullscreen要素をfullscreenにすることに注意してください。そのため、フルスクリーンを複数回リクエストした場合、フルスクリーンをキャンセルしてもフルスクリーンが完全に終了するとは限らず、以前のフルスクリーン状態にロールバックする可能性があります。

例:

1.次のようにできます：

$(document).on('webkitExitFullScreen', function()      {       
  alert("Full Screen Closed"); 
});

2. さらに使用するために変数を使用できます。

var exitedFullScreen;
$(document).on("webkitExitFullScreen", function() {
   exitedFullScreen = !!$(document).fullScreen();
}

3. コンテナーに適用します。

$('video')[0].webkitExitFullScreen();

4. JavaScript のみを使用する場合:

<script type="text/javascript">
  function ExitVideo() {
      document.getElementsByTagName('video')[0].webkitExitFullScreen();
  }
</script>

5. 必要なイベントへのアクセスを提供するサードパーティのプラグインもいくつかあります。

編集1

ブラウザー間で互換性の問題があります。異なるステートメントの例を次に示します。

document.webkitExitFullscreen();
document.mozCancelFullscreen();
document.exitFullscreen();

編集2

Fullscreen API は、 Chrome 15、Firefox 14、およびOpera 12でデフォルトで有効になっています。API の残りの部分について詳しくは、仕様を参照してください。

2012 年 10 月 11 日に更新: 仕様の変更に合わせて。requestFullscreen() の「S」を小文字にし、document.webkitCancelFullScreen() を document.webkitExitFullscreen() に変更しました。

編集3

Firefox でのデバッグに jQuery を使用せずに、次のことを試してください。

var videoElement = document.getElementById("myvideo");

  function toggleFullScreen() {
    if (!document.mozFullScreen && !document.webkitFullScreen) {
      if (videoElement.mozRequestFullScreen) {
        videoElement.mozRequestFullScreen();
      } else {
        videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else {
        document.webkitCancelFullScreen();
      }
    }
  }

  document.addEventListener("keydown", function(e) {
    if (e.keyCode == 13) {
      toggleFullScreen();
    }
  }, false);

編集4

Firefox で jQuery を使用するには、別の例を試してください。

if (document.mozCancelFullScreen) { 
    alert('Full Screen Closed') 
}
于 2013-10-14T10:12:57.970 に答える
-2 
$('video').bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullscreenOn' : 'FullscreenOff';

    // Now do something interesting
    alert('Event: ' + event);    
});
于 2014-05-15T01:41:20.760 に答える