如何在页面加载时强制 html5 视频播放器进入全屏？

Question

我试图在页面加载后立即强制我的 html5 播放器到 go 进入全屏，我尝试了我能找到的不同解决方案，但似乎没有一个适合我

这是我正在使用的代码

 <,DOCTYPE html> <html lang="it"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Grazie e arrivederci</title> <link rel="stylesheet" href="../stili.css"> </head> <body onload="requestFullScreen()"> <video width=960 height=540 id="grazieVid" controls autoplay> <source src="grazie.mp4"></source> </video> <script> function requestFullScreen() { var element = document;getElementById("grazieVid"). // Supports most browsers and their versions. var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element;msRequestFullScreen. if (requestMethod) { // Native full screen. requestMethod;call(element). } else if (typeof window.ActiveXObject.== "undefined") { // Older IE; var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } } </script> </body> </html>

Answer 1

HTML 5 没有提供制作视频全屏的方法，但是并行的 Fullscreen API 定义了一个 API 让元素全屏显示自己。

这可以应用于任何元素，包括视频。

浏览器支持很好，但 Inte.net Explorer 和 Safari 需要前缀版本。

提供了一个外部演示，因为 Stack Snippet 沙盒规则打破了它。

<div id="one">
    One
</div>

<div id="two">
    Two
</div>

<button>one</button>
<button>two</button>


addEventListener("click", event => {
    const btn = event.target;
    if (btn.tagName.toLowerCase() !== "button") return;
    const id = btn.textContent;
    const div = document.getElementById(id);
    if (div.requestFullscreen) 
        div.requestFullscreen();
    else if (div.webkitRequestFullscreen) 
        div.webkitRequestFullscreen();
    else if (div.msRequestFullScreen) 
      div.msRequestFullScreen();
});

如何在页面加载时强制 html5 视频播放器进入全屏？

问题描述

1 个解决方案

解决方案1
0 2022-03-27 17:40:44

如何在页面加载时强制 html5 视频播放器进入全屏？

问题描述

1 个解决方案

解决方案1 0 2022-03-27 17:40:44

解决方案1
0 2022-03-27 17:40:44