javascript 全屏视频 HTML 5 Internet Explorer

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19401760/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 15:28:39  来源:igfitidea点击:

Full Screen Video HTML 5 Internet Explorer

javascriptinternet-explorerhtml5-videofullscreen

提问by 001221

I'm creating my own HTML 5 Browser Player. All controls work apart form getting the full screen working in IE 10, Chrome, Safari and Firefox work great.

我正在创建自己的 HTML 5 浏览器播放器。所有控件都分开工作,让全屏在 IE 10、Chrome、Safari 和 Firefox 中工作得很好。

My JavaScript skills aren't the best so would be great if some could explain things in a simple way for me that would be great.

我的 JavaScript 技能不是最好的,所以如果有人能用简单的方式为我解释事情会很棒。

I've read on some website that IE doesn't support Full Screen, if this is the case why can I go Full Screen via the browser player controls on IE10? (hate Microsoft so crap and behind on everything!)

我在一些网站上读到 IE 不支持全屏,如果是这种情况,为什么我可以通过 IE10 上的浏览​​器播放器控件进入全屏?(讨厌微软在所有事情上都如此垃圾和落后!)

Would appreciate and help and suggestions! thanks in advance!

将不胜感激和帮助和建议!提前致谢!

This is what I have so far for my full screen function:

到目前为止,这是我的全屏功能:

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

采纳答案by Quentin

I've read on some website that IE doesn't support Full Screen

我在一些网站上读到 IE 不支持全屏

It won't support the full screen apiuntil version 11.

直到版本 11 才支持全屏 api

if this is the case why can I go Full Screen via the browser player controls on IE10?

如果是这种情况,为什么我可以通过 IE10 上的浏览​​器播放器控件进入全屏模式?

Because they are nativecontrols; they don't use the full screen API.

因为它们是本机控件;他们不使用全屏 API。

回答by roydukkey

IE hasn't supported the Full Screen API, until version 11.

IE 不支持 Full Screen API,直到版本 11。

However, if you're looking to produce a similar effect in IE10<=, you could toggle an element between position: staticand position: fixed. While the element has fixed positioning you could give it width: 100%; height: 100%.

但是,如果您希望在 IE10<= 中产生类似的效果,则可以在position: static和之间切换元素position: fixed。虽然元素有固定的定位,但你可以给它width: 100%; height: 100%

You can see this is how it's done on YouTube's HTML5 playerfor IE.

您可以看到这是在YouTube 的IE的 HTML5 播放器上完成的。

Additionally, it appears you are able to send the F11keypress from JavaScript which brings the browser window into a full screen viewing mode.

此外,您似乎可以F11从 JavaScript发送按键,从而使浏览器窗口进入全屏查看模式。

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

With these two method's combined, I think this is the closest IE can get in emulating the Full Screen API.

结合这两种方法,我认为这是 IE 可以模拟全屏 API 的最接近的方法。

回答by mms

IE 11 does support it, works well, better than Chrome in some cases, there is a bug with iframes however:

IE 11 确实支持它,运行良好,在某些情况下比 Chrome 更好,但是 iframe 存在一个错误:

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

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

回答by Demnogonis

Note that IE11 also needs a vendor prefix. msRequestFullscreen()

请注意,IE11 还需要供应商前缀。 msRequestFullscreen()

So for full cross browser functionality you need something like this:

因此,对于完整的跨浏览器功能,您需要这样的东西:

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();
}