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。任何人都可以帮我解决这个问题。我在谷歌搜索了一整天，但找不到任何解决方案。帮助将不胜感激。

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;

HTML5全屏API无法在Firefox，IE中运行

1 个答案: