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

发布于 2025-01-17 04:03:33 字数 1495 浏览 1 评论 0原文

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

这是我正在使用的代码

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

原文

I'm trying to force my html5 player to go into fullscreen as soon as the page loads, I've tried with different solutions I could find around, but none seemes to work for me

Here is the code I'm working with

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

晨与橙与城 2025-01-24 04:03:33

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

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

浏览器支持良好，但 Internet 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();
});

HTML 5 provides no way to make a video fullscreen, but the parallel Fullscreen API defines an API for elements to display themselves fullscreen.

This can be applied to any element, including videos.

Browser support is good, but Internet Explorer and Safari need prefixed versions.

An external demo is provided as Stack Snippet sandboxing rules break it.

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

回复收藏 0 原文

~没有更多了~