HTML5退出video全屏
我在普通屏幕上有一个带有自定义控件的HTML5video。 没有全屏自定义控件。 我只是全屏显示默认控件。 但是当退出全屏时我需要禁用默认控件。 我们如何知道video是否已使用JavaScript或jQuery退出全屏模式？
如果您在全屏文档中，则只能调用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：
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') }
我从上面的post中取出了这个，但加入了它。 我设置了文档值，然后允许我退出全屏。
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(); } } });
这是现在（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();
$('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); });