WebBrowser control video element enter fullscreen

Question

In my project, I have a WebBrowser control with a video element and I want to insert a button that when I press it, the video element will switch to fullscreen mode.

I tried this code:

var video = document.getElementById('video');

if (video.requestFullscreen) {
    video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
    video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen();
}

And it won't work. I read in some article that it's not possible in IE browser to make video element enter fullscreen. Is there any fix for this? Did I do something wrong?

Answer 1

According to MSDN, we should be able to handle the OnFullScreen event and track the FullScreen property of WebBrowser control. You'd need to access the underlying ActiveX object for that. I haven't tried FullScreen/OnFullScreen myself, though.

[UPDATE] Unfortunately, OnFullScreen doesn't get fired for WebBrowser when full-screen mode is entered via the native UI of the <video> element, I've just verified that. The object model of IE <video> element doesn't seem to have any methods/properties/events related to full-screen mode, either. So, programmatic resizing of the <video> element would probably be the best option.

Answer 2

You could read the width and height of your viewport and set the video controls width and height to the same values. Won't go proper full screen - but will fill up the space in the browser.

Answer 3

That method requires specific prefixes to work in different browsers, in your case for IE browser you should use: msRequestFullscreen and msRequestFullscreen()

See below:

/* Get the element you want displayed in fullscreen mode (a video in this example): */
var video = document.getElementById("video"); 

/* When the openFullscreen() function is executed, open the video in fullscreen.
Note that we must include prefixes for different browsers, as they don't support the requestFullscreen property yet */

function openFullscreen() {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.mozRequestFullScreen) { /* Firefox */
    video.mozRequestFullScreen();
  } else if (video.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    video.webkitRequestFullscreen();
  } else if (video.msRequestFullscreen) { /* IE/Edge */
    video.msRequestFullscreen();
  }
}

By the way if you want to exit fullscreen mode use msExitFullscreen() method to cancel fullscreen mode in IE browser.

See below:

/* Close fullscreen */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { /* Firefox */
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE/Edge */
    document.msExitFullscreen();
  }
}