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?

score 2 · Answer 1 · answered Oct 02 '13 at 13:37

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.

answered Oct 02 '13 at 13:37

BlackSpy

5,563
5
29
38

1

+1, it appears there is no better way of doing this with IE `WebBrowser`. – noseratio Oct 06 '13 at 06:19
@noseratio noseratio and BlackSpy would you guys mind to take a look at my question: https://stackoverflow.com/questions/55622038/how-to-change-webbrowser-fullscreen-video-mode It's a similar one, I could not find the answer tho. – Simple Apr 12 '19 at 17:44

score 2 · Accepted Answer · edited May 23 '17 at 12:22

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.

According [this](https://msdn.microsoft.com/en-us/library/aa768338(v=vs.85).aspx) the WebBrowser object ignores event OnFullScreen. — Evgeni Nabokov, Oct 02 '15 at 13:43

score 0 · Answer 3 · answered Apr 12 '19 at 21:00

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

WebBrowser control video element enter fullscreen

3 Answers3

Linked