Full Screen HTML 5 Internet Explorer Video

Question

I create my own HTML 5 browser. All controls work separately from how the full-screen mode in IE 10, Chrome, Safari and Firefox works fine.

My JavaScript skills are not the best, so it would be great if someone could explain things in a simple way for me, that would be great.

I read on some website that IE does not support full screen mode, if so, why can I go to full screen using the IE10 browser controls? (hate Microsoft so shit and back at all!)

Thank you for your help and suggestions! thanks in advance!

This is what I still have for my fullscreen function:

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

Answer 1

I read on some website that IE does not support fullscreen

It will not support full screen api until version 11.

if so, why can I go in full screen using browser controls on IE10?

Because they are their own controls; they do not use the full-screen API.

Answer 2

IE did not support the Full Screen API until version 11.

However, if you want to create a similar effect in IE10 <=, you can switch the element between position: static and position: fixed . Although the element has fixed positioning, you can give it width: 100%; height: 100% width: 100%; height: 100% .

You can see how this is done on the YouTube HTML5 player for IE.

Also, it looks like you can send the F11 keystroke using JavaScript, which will bring the browser window to full screen view.

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

If these two methods are combined, I think this is the closest IE that can get the Full Screen API emulation.

Answer 3

IE 11 supports it, it works well, better than Chrome, in some cases there is an error with iframe:

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

Answer 4

Please note that IE11 also requires a vendor prefix. 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(); }