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
}

我尝试了不同的方法，但只能在铬中工作。谁能帮我解决这个问题。我已经一整天都在谷歌上搜索，但找不到任何解决方案。帮助将不胜感激。

Answer 1

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

使用所有供应商前缀，它提供：

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

但是某些版本的IE不支持从addEventListener()方法附加它，因此更好的跨浏览器方式实际上是：

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;