JavaScript requestFullscreen not working in Edge

Question

I'm trying to make a video (or anything else) go into a fullscreen mode in the Edge browser through JavaScript. But I can't get it to work. In Chrome everything works as expected.

I tried all steps in the js command line tool. The correct html video element is fetched with the line document.getElementById("video_player");. Then I tried to enter the command video.requestFullscreen();, but it's not doing anything. Not even an error :(

I have activated the fullscreen API in the about: flags settings and I've turned off all browser extension.

The HTML video element is not inside an <iframe>

EDIT:

This is my full code. The js file is loaded at the end of the HTML document. As you can see it's not doing much right now.

console.log("Running");

var video = document.getElementById("video_player");

FullScreenStart();

function FullScreenStart(){
    console.log("AutoFullScreen started");

    console.log(video);

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

function FullScreenOn(){
    console.log("FullScreen activated");
}

function FullScreenOff(){
    console.log("FullScreen deactivated");
}

document.onwebkitfullscreenchange = function(evt) {

    if(document.webkitIsFullScreen){
        FullScreenOn();
    } else {
        FullScreenOff();
    }
};

Please, can somebody help me to get this to work? I've wasted two days on this problem now.

https://stackoverflow.com/questions/41727863/video-js-full-screen-in-ie-and-edge-browser This may be of help. — dillon.harless, Dec 14 '18 at 16:29
@dillon.harless Thanks, but I don't get a black screen. It just does nothing at all :( — Fr0stst0rm, Dec 14 '18 at 16:42
When I run this code (which should theoretically work with the webkit vendor prefix), I get an "Unspecified Error": https://jsfiddle.net/e9noLhzu/1/ In Chrome, I get a warning that "API can only be initiated by a user gesture.". See [this question's answers](https://stackoverflow.com/q/29281986/215552). — Heretic Monkey, Dec 14 '18 at 17:25
Oh that makes sense. Thanks, I guess I have to find another way to achieve something similar to full screen :/ — Fr0stst0rm, Dec 14 '18 at 18:13

score 1 · Accepted Answer · answered Dec 17 '18 at 05:50

I made a test with your above posted code.

I find that your code will not work in any browser, If you call the fullscreen api using code.

I am not sure, how it works on chrome as you said in original post.

If you refer the documentation than you can find information below.

Note: This method must be called while responding to a user interaction or a device orientation change; otherwise it will fail.

Reference:

Element.requestFullscreen()

As said in the documentation, Method get failed in both Chrome and Edge if I call it from code but it works if user try to call it using button click.

Example code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h2>Fullscreen with JavaScript</h2>
<p>Click on the button to open the video in fullscreen mode.</p>
<button onclick="openFullscreen();">Open Video in Fullscreen Mode</button>
<p><strong>Tip:</strong> Press the "Esc" key to exit full screen.</p>

<video width="100%" controls id="myvideo">
  <source src="rain.mp4" type="video/mp4">
  <source src="rain.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<script>
/* Get the element you want displayed in fullscreen */ 
var elem = document.getElementById("myvideo");

/* Function to open fullscreen mode */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}
</script>

<p>Note: Internet Explorer 10 and earlier does not support fullscreen mode.</p>

</body>
</html>

Reference:

HTML DOM requestFullscreen() Method

It was done intentionally, Because if it get work from code than so many sites starts showing pop ups without asking permission from user. Which can be annoying for user.

I have this working on safari (iOS). I wire up an eventlistener to the video element for 'play' - the video goes to full screen on the iPad but not on Edge — Tim Wheeler, Jan 23 '19 at 05:59

JavaScript requestFullscreen not working in Edge

1 Answers1