HTML5退出视频全屏

Question

我在普通屏幕上有自定义控件的HTML5视频.没有全屏自定义控件.我只是全屏显示默认控件.但是当退出全屏时我需要禁用默认控件.我们如何知道视频是否已使用JavaScript或jQuery退出全屏模式？

Answer 1

document.mozCancelFullScreen()如果您在全屏文档中,则只能打电话.即如果你所在的另一个文档中包含的是全屏,mozCancelFullScreen()将不会在内部iframe中执行任何操作,因为只有外部文档是全屏的.即在外部文档中调用mozCancelFullScreen将取消全屏,但在内部文档中调用它不会.

另请注意,mozCancelFullScreen()恢复全屏以将之前的全屏元素设置为全屏.因此,如果您多次请求全屏,则取消全屏不一定完全退出全屏,它可能会回滚到之前的全屏状态.

例子:

你可以选择:

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

你可以使用一个变量来进一步说明:

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.还有一些第三方插件可让您访问所需的活动:

• http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
• https://github.com/ruidlopes/jquery-fullscreen

编辑1

跨浏览器存在兼容性问题,以下是不同语句的示例:

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

编辑2

默认情况下,Chrome 15,Firefox 14和Opera 12中启用了Fullscreen API .有关API其余部分的更多信息,请参阅规范.

更新2012-10-11:与规范更改内联.在requestFullscreen()中降低了"S",并将document.webkitCancelFullScreen()更改为document.webkitExitFullscreen().

编辑3

尝试以下操作,而不使用jQuery在Firefox中进行调试:

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') 
}

Answer 2

我从上面的帖子中取出了这个,但加入了它.我设置了文档值,然后允许我退出全屏.

  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);

我只添加了这两行......

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();
     }
    }
   });

Answer 3

这是目前（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();