1. 最简单的方法：使用 playsinline 和 webkit-playsinline 属性，让视频在移动端 Safari 内播放,然后通过一个按钮触发全屏。
  2. 真正“强制”全屏的方法：使用 JavaScript 的 requestFullscreen() API,在视频开始播放时自动将其置为全屏模式。

标准方法（通过按钮手动触发全屏）

这是最常用和兼容性最好的方法，用户点击视频或一个专门的按钮后,视频会进入全屏模式。

网页强制全屏视频html代码
（图片来源网络，侵删）

HTML 代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">强制全屏视频示例</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: sans-serif;
        }
        .video-container {
            position: relative;
            width: 80%;
            max-width: 800px;
        }
        video {
            width: 100%;
            height: auto;
            display: block;
            background-color: #000;
        }
        /* 播放/暂停按钮样式 */
        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
            transition: background-color 0.3s;
        }
        .play-button:hover {
            background-color: rgba(255, 255, 255, 1);
        }
        .play-button::after {
            content: '';
            width: 0;
            height: 0;
            border-left: 20px solid #333;
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            margin-left: 5px;
        }
        .video-container.playing .play-button {
            display: none;
        }
    </style>
</head>
<body>
    <div class="video-container" id="videoContainer">
        <!-- 
          controls: 显示浏览器自带的播放控件（进度条、音量、播放/暂停等）
          autoplay: 自动播放（注意：很多浏览器限制没有交互的自动播放）
          muted: 静音，可以解决大部分浏览器的自动播放限制
          playsinline: 在iOS设备上，视频在网页内播放，而不是直接进入全屏
          webkit-playsinline: 为了兼容旧版iOS
        -->
        <video id="myVideo" controls autoplay muted playsinline webkit-playsinline>
            <!-- 
              提供多种视频格式以提高兼容性 
              MP4 (H.264) 是最广泛支持的格式
            -->
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            您的浏览器不支持 HTML5 视频。
        </video>
        <div class="play-button" id="playButton"></div>
    </div>
    <script>
        const video = document.getElementById('myVideo');
        const playButton = document.getElementById('playButton');
        const videoContainer = document.getElementById('videoContainer');
        // 点击自定义播放按钮
        playButton.addEventListener('click', function() {
            video.play();
            videoContainer.classList.add('playing');
        });
        // 当视频开始播放时，隐藏自定义按钮
        video.addEventListener('play', function() {
            videoContainer.classList.add('playing');
        });
        // 当视频暂停时，显示自定义按钮
        video.addEventListener('pause', function() {
            videoContainer.classList.remove('playing');
        });
        // 点击视频本身也可以播放/暂停
        video.addEventListener('click', function() {
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
        });
        // 全屏功能
        // 全屏按钮
        const fullscreenButton = document.createElement('button');
        fullscreenButton.innerText = '进入全屏';
        fullscreenButton.style.marginTop = '10px';
        fullscreenButton.style.padding = '10px 15px';
        fullscreenButton.style.cursor = 'pointer';
        document.body.appendChild(fullscreenButton);
        fullscreenButton.addEventListener('click', function() {
            if (video.requestFullscreen) {
                video.requestFullscreen();
            } else if (video.webkitRequestFullscreen) { /* Safari */
                video.webkitRequestFullscreen();
            } else if (video.msRequestFullscreen) { /* IE11 */
                video.msRequestFullscreen();
            }
        });
        // 监听全屏变化事件，可以用来更新按钮文字等
        document.addEventListener('fullscreenchange', function() {
            if (document.fullscreenElement) {
                fullscreenButton.innerText = '退出全屏';
            } else {
                fullscreenButton.innerText = '进入全屏';
            }
        });
    </script>
</body>
</html>

代码解释

  • HTML <video>:
    • controls: 显示浏览器默认的播放控制条。
    • autoplay: 页面加载后自动播放视频。
    • muted: 静音。非常重要，因为大多数现代浏览器（特别是移动端）不允许有声视频在没有用户交互的情况下自动播放。
    • playsinline 和 webkit-playsinline: 这两个属性是针对 iOS 设备的，它们告诉 Safari，视频应该在网页内联播放，而不是默认地跳出整个浏览器进入全屏模式，这样我们才能通过 JavaScript 控制它。
  • JavaScript:
    • 我们获取了 video 和 playButton 元素。
    • 通过 video.requestFullscreen() 方法来请求将视频元素全屏显示。
    • 为了兼容不同浏览器（如 Safari 和旧版 IE），我们检查了 webkitRequestFullscreen 和 msRequestFullscreen 等不同的 API 前缀。
    • document.addEventListener('fullscreenchange', ...) 用于监听全屏状态的变化,我们可以在这里更新按钮文字或执行其他操作。

自动全屏（更“强制”的方法）

如果您希望视频一旦开始播放就自动进入全屏模式，可以在 play 事件中调用 requestFullscreen()。

修改后的 JavaScript 代码

只需将方法一中的 JavaScript 替换为以下代码即可：

const video = document.getElementById('myVideo');
const videoContainer = document.getElementById('videoContainer');
// 点击自定义播放按钮
const playButton = document.getElementById('playButton');
playButton.addEventListener('click', function() {
    // 先播放视频
    video.play();
    // 播放后，尝试立即进入全屏
    enterFullscreen();
});
// 当视频开始播放时，尝试进入全屏
video.addEventListener('play', function() {
    enterFullscreen();
});
// 封装一个进入全屏的函数
function enterFullscreen() {
    // 检查视频是否正在播放，避免在暂停状态下进入全屏
    if (!video.paused) {
        if (video.requestFullscreen) {
            video.requestFullscreen();
        } else if (video.webkitRequestFullscreen) { /* Safari */
            video.webkitRequestFullscreen();
        } else if (video.msRequestFullscreen) { /* IE11 */
            video.msRequestFullscreen();
        }
    }
}
// 当视频暂停时，退出全屏（可选）
video.addEventListener('pause', function() {
    if (document.fullscreenElement) {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
    }
});
// 点击视频本身也可以播放/暂停，并触发全屏
video.addEventListener('click', function() {
    if (video.paused) {
        video.play();
    } else {
        video.pause();
    }
});

重要提示：浏览器安全策略

现代浏览器（Chrome, Firefox, Edge 等）出于安全和用户体验的考虑，不允许网页在没有用户明确交互（如点击）的情况下自动播放视频并使其全屏。

  • “自动播放”限制：有声视频通常需要 muted 属性才能自动播放。
  • “自动全屏”限制：即使是静音视频，直接在 window.onload 或类似事件中调用 requestFullscreen() 也会被阻止。

方法二中，我们也必须将 requestFullscreen() 的调用放在一个由用户触发的 click 或 play 事件中，这确保了用户首先与页面进行了交互（比如点击了播放按钮）,然后浏览器才允许视频进入全屏模式。

网页强制全屏视频html代码
（图片来源网络，侵删）
特性 方法一 (手动触发) 方法二 (自动触发)
触发方式 用户点击“进入全屏”按钮 用户点击播放按钮后自动进入
用户体验 用户有完全控制权 沉浸式体验，但可能让用户感到突兀
浏览器兼容性 非常好，符合所有现代浏览器的安全策略 非常好，同样符合安全策略（必须有用户交互）
推荐场景 大多数标准网页，视频网站 游戏、广告、Kiosk 展示等需要沉浸式体验的场景

对于绝大多数情况，方法一是更安全、更受用户欢迎的选择。方法二则适用于那些明确需要强制全屏体验的特殊应用。

网页强制全屏视频html代码
（图片来源网络，侵删）