HTML5 全屏 API 在 Firefox 和 IE 中不工作

Question

我想检测 HTML5 视频全屏模式。下面的代码仅适用于 chrome。该代码不适用于 Firefox 和 IE。我没有 Safari，但我希望它也能在 Safari 中使用。

 video.addEventListener('webkitfullscreenchange', fullscreenHandler, false);
 video.addEventListener('mozFullScreenElement', fullscreenHandler, false);
 video.addEventListener('fullscreenElement', fullscreenHandler, false);
 video.addEventListener('requestFullscreen', fullscreenHandler, false);

function fullscreenHandler()
{
//fullscreen code
}

我尝试了不同的方法，但只适用于 chrome。谁能帮我解决这个问题。我在 google 上搜索了一整天，但找不到任何解决方案。帮助将不胜感激。

Answer 1

正确的事件是fullscreenchange，它应该附在文档中。

对于所有供应商前缀，它给出：

document.addEventListener('webkitfullscreenchange', fullScreenHandler);
document.addEventListener('mozfullscreenchange', fullScreenHandler);
document.addEventListener('msfullscreenchange', fullScreenHandler);
document.addEventListener('fullscreenchange', fullScreenHandler);

但某些版本的 IE 不支持从 addEventListener() 方法附加它，所以更好的 cross-browser 方法实际上是：

if('onfullscreenchange' in document){
  document.addEventListener('fullscreenchange', fullScreenHandler);
}
if('onmozfullscreenchange' in document){
  document.addEventListener('mozfullscreenchange', fullScreenHandler);
}
if('onwebkitfullscreenchange' in document){
  document.addEventListener('webkitfullscreenchange', fullScreenHandler);
}
if('onmsfullscreenchange' in document){
  document.onmsfullscreenchange = fullScreenHandler;
}

如果您需要获取哪个元素触发了全屏模式，您可以检查document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;

HTML5 全屏 API 在 Firefox 和 IE 中不工作

HTML5 full screen API not working in Firefox , IE

html

javascript

css

html5-fullscreen