javascripthtmlmicrosoft-edgehtml5-fullscreen

JavaScript requestFullscreen not working in Edge

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.

Solution

  • 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.