如何借助Python Flask或JavaScript实现HTML5按钮触发循环背景视频并定时跳转

一、Python Flask 还是 JavaScript？ #

这俩不是非此即彼的对立选项，而是互补的技术，得看你要做的事：

• 要是需要搭建后端服务：比如处理HTTP请求、连接数据库、做用户认证、提供API接口，选Flask。它是轻量级Python后端框架，快速搭建后端逻辑的效率很高。
• 要是负责前端交互/客户端逻辑：比如页面元素动态操作、响应用户点击、前端表单验证、做客户端动画，用JavaScript。它是浏览器端的核心语言，管的是用户能直接摸到的交互体验。
• 绝大多数实际项目会同时用两者：Flask做后端提供数据和服务，JavaScript做前端交互，前后端配合完成完整的Web应用。

二、HTML5实现按钮触发循环背景视频+自动重定向 #

直接上可运行的代码示例，关键逻辑都标清楚了：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 把视频设置为全屏背景 */
        #bg-video {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            object-fit: cover; /* 保证视频铺满屏幕且不变形 */
            z-index: -1; /* 让视频在页面内容下方 */
            display: none; /* 默认隐藏视频 */
        }
        #play-btn {
            padding: 12px 24px;
            font-size: 18px;
            cursor: pointer;
            position: relative;
            z-index: 1; /* 让按钮在视频上方 */
        }
    </style>
</head>
<body>
    <button id="play-btn">点击播放背景视频并跳转</button>
    <!-- 替换src为你的视频文件路径，MP4格式兼容性最好 -->
    <video id="bg-video" src="your-video-file.mp4" loop></video>

    <script>
        const playBtn = document.getElementById('play-btn');
        const bgVideo = document.getElementById('bg-video');

        playBtn.addEventListener('click', function() {
            // 隐藏按钮，显示并播放视频
            playBtn.style.display = 'none';
            bgVideo.style.display = 'block';
            bgVideo.play();

            // 设置延迟重定向，比如5秒后跳转，单位是毫秒
            setTimeout(() => {
                window.location.href = '你的目标网页地址';
            }, 5000);
        });
    </script>
</body>
</html>

核心要点：

• 视频的loop属性直接实现循环播放，不用额外写逻辑。
• 点击按钮后通过JS控制视频的显示和播放状态，同时启动定时器。
• 定时器的第二个参数可以自己改，调整跳转前的等待时长。

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