如何制作可修改video视频播放状态的功能按钮？

核心思路符合当前浏览器的媒体播放规则：预先设置静音的视频可以自动加载/播放，用户点击交互元素后再解除静音、调整播放状态，不需要额外的权限申请。

完整实现代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日常分享网页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 整蛊视频默认放在底层 */
        #prankVideo {
            width: 100vw;
            height: 100vh;
            object-fit: cover;
            position: fixed;
            top: 0;
            left: 0;
            z-index: -1;
        }
        /* 仿Cookie弹窗样式 */
        .cookie-popup {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            max-width: 600px;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 9999;
            font-family: system-ui, sans-serif;
        }
        .cookie-popup p {
            color: #333;
            line-height: 1.5;
            margin-bottom: 15px;
        }
        .cookie-buttons {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }
        .cookie-btn {
            padding: 8px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .accept-btn {
            background: #2385bb;
            color: #fff;
        }
        .reject-btn {
            background: #f0f0f0;
            color: #333;
        }
    </style>
</head>
<body>
    <!-- 预先加载的整蛊视频，设置静音自动播放，也可以把autoplay换成preload="auto" 初始暂停 -->
    <video id="prankVideo" src="替换成你的整蛊视频本地路径" muted playsinline autoplay></video>

    <!-- 仿Cookie同意弹窗 -->
    <div class="cookie-popup" id="cookiePopup">
        <p>我们使用Cookie来优化您的浏览体验，继续浏览本站即表示您同意我们的Cookie使用政策。</p>
        <div class="cookie-buttons">
            <button class="cookie-btn reject-btn" id="rejectBtn">拒绝</button>
            <button class="cookie-btn accept-btn" id="acceptBtn">同意</button>
        </div>
    </div>

    <script>
        const prankVideo = document.getElementById('prankVideo');
        const cookiePopup = document.getElementById('cookiePopup');
        const acceptBtn = document.getElementById('acceptBtn');
        const rejectBtn = document.getElementById('rejectBtn');

        // 点击两个按钮任意一个都触发播放效果
        function triggerPrank() {
            // 解除视频静音
            prankVideo.muted = false;
            // 如果视频初始是暂停状态，调用播放方法
            if (prankVideo.paused) {
                prankVideo.play();
            }
            // 把视频提到最上层显示，也可以根据需要改成其他显示逻辑
            prankVideo.style.zIndex = '10000';
            // 隐藏弹窗
            cookiePopup.style.display = 'none';
        }

        acceptBtn.addEventListener('click', triggerPrank);
        rejectBtn.addEventListener('click', triggerPrank);
    </script>
</body>
</html>

可选优化点 #

• 可以把弹窗文案修改的更贴合你伪装的网页内容，降低朋友的防备心
• 如果想要更恶搞的效果，可以给「拒绝」按钮添加mouseover事件，鼠标悬停时自动变换位置，强制用户点击「同意」按钮
• 视频可以提前裁剪成搞笑或者整蛊内容，不需要太长，10-30秒效果最好

内容的提问来源于stack exchange，提问作者user16671114