全屏视频HTML 5在Internet Explorer中的实现

Question

我正在创建自己的HTML 5浏览器播放器。所有控件都可以工作，除了在IE 10中使全屏功能正常工作之外，Chrome、Safari和Firefox都非常出色。

我的JavaScript技能不是很好，所以如果有人能简单地解释一下这个问题，那就太好了。

我在某些网站上读到IE不支持全屏，如果真是这样，为什么我可以通过浏览器播放器控件在IE10上全屏呢？（讨厌微软，一切都落后！）

非常感谢您的帮助和建议！提前致谢！

以下是我目前全屏函数的代码：

function toggleFullScreen() {
    if(vid.requestFullScreen) {
    vid.requestFullScreen();   
    } else if(vid.webkitRequestFullScreen) { 
    vid.webkitRequestFullScreen();   
    } else if(vid.mozRequestFullScreen) { 
    vid.mozRequestFullScreen();
    }
    }

- user0129e021939232

Answer 1

直到版本11，IE才支持全屏API。

然而，如果您希望在IE10及以下版本中产生类似的效果，可以在元素之间切换position: static和position: fixed。在元素具有固定定位时，您可以给它width: 100%; height: 100%。

您可以在YouTube的HTML5播放器中看到这是如何实现的。

此外，似乎您可以从JavaScript发送F11键按下事件，将浏览器窗口带入全屏查看模式。

var wscript = new ActiveXObject("Wscript.shell");
wscript.SendKeys("{F11}");

结合这两种方法，我认为这是IE在模拟全屏API方面所能达到的最接近效果。

- roydukkey

Answer 2

我在某个网站上看到IE不支持全屏功能。

直到11版本，它才会支持全屏API。

如果是这样，为什么我可以通过IE10浏览器播放器控件进入全屏模式呢？

因为它们是本地控件，不使用全屏API。

- Quentin

---

好的，我明白了，所以没有办法绕过这个问题吗？我不能通过JS访问原生控件吗？@Quentin - user0129e021939232

不，没有绕过它的方法。 - Quentin

Answer 3

IE 11支持此功能，有时比Chrome表现更好，但在使用iframes时会出现一个错误：

https://connect.microsoft.com/IE/feedback/details/814527/ie11-iframes-body-offsetwidth-incorrect-when-iframe-is-in-full-screen-mode#tabs

- mms

Answer 4

请注意，IE11也需要供应商前缀。msRequestFullscreen() 因此，为了实现完全的跨浏览器功能，您需要像这样的内容：

var video = document.getElementById('videoID');
if (video.requestFullscreen) {
    video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
    video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen();
} else if (video.msRequestFullscreen) {
    video.msRequestFullscreen();
}

- Demnogonis