3

我想检测 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 中工作。谁能帮我解决这个问题。我在谷歌上搜索了一整天，但找不到任何解决方案。帮助将不胜感激。

4

1 回答 1

4

正确的事件是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;

于 2016-01-24T09:47:02.620 回答