HTML5退出视频全屏

Question

HTML5退出视频全屏

javascriptjqueryvideohtml5-video

12

我有一个带有自定义控件的正常屏幕 HTML5 视频。在全屏状态下没有自定义控件。我只在全屏状态下显示默认控件。但是当退出全屏状态时，我需要禁用默认控件。如何使用 JavaScript 或 jQuery 知道视频是否已退出全屏模式？

- Arvin

4个回答

8

以下是更新后的代码（截至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();

- Koby Douek

7

我从上面的帖子中获取了这个内容，但是进行了补充。我设置了文档的值，然后就可以退出全屏模式。

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

- Stephon Lawrence

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

- Lucas Pedroza

8

如果您要复制/粘贴，请列出您的来源：http://www.intheloftstudios.com/blog/detecting-html5-video-fullscreen-and-events请翻译文本内容，不要解释它。 - GFoley83

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ilia · Accepted Answer

只有在处于全屏状态的文档中，才能调用 document.mozCancelFullScreen()。也就是说，如果您在一个被包含在另一个处于全屏状态的文档中的 iframe 中，调用 mozCancelFullScreen() 将不会在内部 iframe 中执行任何操作，因为只有外部文档实际上处于全屏状态。换句话说，在外部文档中调用 mozCancelFullScreen 将会取消全屏状态，但在内部文档中调用则不会。

此外，请注意，mozCancelFullScreen() 会将全屏状态还原为以前处于全屏状态的元素。因此，如果您多次请求全屏状态，则取消全屏状态不一定会完全退出全屏状态，而可能会回滚到先前的全屏状态。

示例：

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. 还有几个第三方插件可以让您访问所需的事件：

EDIT 1

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

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

编辑2

在Chrome 15、Firefox 14和Opera 12中默认启用了全屏API。有关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') 
}