web-dev-qa-db-ja.com

HTML5終了ビデオフルスクリーン

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

javascriptjqueryvideohtml5-video
11
Arvin

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

また、mozCancelFullScreen()はfullscreenを元に戻し、前のfullscreen要素をfullscreenとして持つことに注意してください。したがって、fullscreenを複数回リクエストした場合、キャンセルfullscreenは必ずしも完全に終了するわけではありませんfullscreen完全に、前にロールバックする可能性がありますフルスクリーン状態。

例：

1。あなたは行くことができます：

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

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

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

。コンテナに適用する：

$('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') 
}
13
Ilia Rostovtsev

私は上記の投稿からこれを取りましたが、それに追加しました。ドキュメントの値を設定して、フルスクリーンで終了できるようにしました。

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

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

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

これらの2行だけを追加しました..

document.mozFullScreen = true;

document.webkitFullScreen = true;

上記のlliaのコードに加えて、これは私にとって完璧に機能しました。

編集：これは以前に書かれたものよりも良い修正のようです

  fullScreenButton.addEventListener("click", function() {
   if (!document.fullscreenElement &&    // alternative standard method
   !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
     if (video.requestFullscreen) {
      video.requestFullscreen();
     } else if (video.msRequestFullscreen) {
      video.msRequestFullscreen();
     } else if (video.mozRequestFullScreen) {
      video.mozRequestFullScreen();
     } else if (video.webkitRequestFullscreen) {
      video.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
     }
    } else {
     if (document.exitFullscreen) {
      document.exitFullscreen();
     } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
     } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
     } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
     }
    }
   });
7
Stephon Lawrence

これが今のところ（2017年6月4日）更新されたコードで、すべてのブラウザで動作します：

if (document.exitFullscreen)
    document.exitFullscreen();
else if (document.webkitExitFullscreen)
    document.webkitExitFullscreen();
else if (document.mozCancelFullScreen)
    document.mozCancelFullScreen();
else if (document.msExitFullscreen)
    document.msExitFullscreen();
4
Koby Douek