Full Screen Video HTML 5 Internet Explorer

Question

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.

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.

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!)

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

Solution 1

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

It won't support the full screen api until version 11.

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

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

Solution 2

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

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

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

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

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.

Solution 3

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

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

Solution 4

Note that IE11 also needs 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();
}

View more solutions

Comments

[user0129e021939232]

Ok I see, so there isn't a way to get around this? Can I not access native controls via JS? @Quentin

[Quentin]

No, there isn't a way around it.