JavaScript requestFullscreen 在 Edge 中不工作

Question

我正在尝试通过 JavaScript 使视频（或其他任何内容）在 Edge 浏览器中进入全屏模式。但我无法让它工作。在 Chrome 中，一切都按预期进行。

我尝试了js命令行工具中的所有步骤。正确的 html 视频元素是通过行 document.getElementById("video_player"); 获取的。然后我尝试输入命令 video.requestFullscreen();，但它什么也没做。甚至没有错误:(

我已经在关于：标志设置中激活了全屏 API 并且我已经关闭了所有浏览器扩展。

HTML 视频元素不在 <iframe>

中

编辑：

这是我的完整代码。 js文件加载在HTML文档的末尾。如您所见，它现在并没有做太多事情。

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

拜托，有人可以帮我让它工作吗？我已经在这个问题上浪费了两天了。

Answer 1

我用你上面的 posted 代码做了一个测试。

我发现您的代码无法在任何浏览器中运行，如果您使用代码调用全屏 api。

我不确定，它是如何在 chrome 上工作的，正如你在原文 post 中所说的那样。

如果您参考文档，则可以在下面找到信息。

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

参考：

Element.requestFullscreen()

如文档中所述，如果我从代码中调用它，方法在 Chrome 和 Edge 中都会失败，但如果用户尝试使用按钮单击来调用它，它就会工作。

示例代码：

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

参考：

HTML DOM requestFullscreen() Method

这是有意为之的，因为如果它从代码中得到工作，那么很多网站会在没有征得用户许可的情况下开始显示弹出窗口。这对用户来说可能很烦人。

JavaScript requestFullscreen 在 Edge 中不工作

JavaScript requestFullscreen not working in Edge

javascript

html

microsoft-edge

html5-fullscreen