如何实现随实时天气自动切换的网站动态视频背景

原有图片背景的逻辑无法直接支持视频播放，只需要新增独立的视频背景层，配合少量JS逻辑动态切换视频源即可实现需求，原有天气接口调用、数据渲染的逻辑可以完全复用。 #

核心改造点 #

• 页面最底层新增固定定位的<video>标签作为背景容器，必须配置muted（静音）、autoplay（自动播放）、loop（循环）、playsinline（移动端内联播放）属性，否则会触发浏览器自动播放限制导致视频无法加载
• 移除原有CSS中给body设置背景图的规则，调整视频层样式铺满整个视口，设置负z-index保证页面内容显示在视频上层
• 新增天气类型与视频路径的映射配置，接口返回天气分类后，动态替换视频标签的播放源即可
• 增加异常兜底：视频加载失败时自动回退到对应天气的纯色背景，避免页面显示异常

改造后完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Weather Background</title>
    <style>
        /* 重置默认边距，避免视频边缘出现白边 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 视频背景层样式 */
        #weatherBg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            object-fit: cover; /* 保证视频不变形铺满屏幕 */
            z-index: -1; /* 放在所有页面内容下方 */
        }
        /* 不同天气的兜底背景色，视频加载失败时显示 */
        body[category="Clear"] { background-color: lightblue; }
        body[category="Clouds"] { background-color: silver; }
        body[category="Rain"] { background-color: dimgray; }
        body[category="Thunderstorm"] { background-color: #2c3e50; }
        body[category="Drizzle"] { background-color: #95a5a6; }
        body[category="Snow"] { background-color: #ecf0f1; }

        /* 原有文字透明样式保留 */
        body[category="Clear"] .category,
        body[category="Clouds"] .category,
        body[category="Rain"] .category,
        body[category="Thunderstorm"] .category,
        body[category="Drizzle"] .category,
        body[category="Snow"] .category,
        .name1, .desc, .temp {
            color: rgba(255, 255, 255, 0);
        }
    </style>
</head>
<body>
    <!-- 新增视频背景元素，放在body最开头 -->
    <video id="weatherBg" muted autoplay loop playsinline></video>

    <div>
        <div class="name1"></div>
        <div class="desc"></div>
        <div class="temp"></div>
        <div class="category"></div>
    </div>
    
    <script>
        var name1 = document.querySelector('.name1');
        var desc = document.querySelector('.desc');
        var temp = document.querySelector('.temp'); 
        var category = document.querySelector('.category'); 
        var bgVideo = document.querySelector('#weatherBg');

        // 天气类型对应视频路径配置，替换成自己的视频文件实际路径即可
        var videoMap = {
            Clear: 'videos/Clear.mp4',
            Clouds: 'videos/Clouds.mp4',
            Rain: 'videos/Rain.mp4',
            Thunderstorm: 'videos/Thunderstorm.mp4',
            Drizzle: 'videos/Drizzle.mp4',
            Snow: 'videos/Snow.mp4'
        }

        fetch('https://api.openweathermap.org/data/2.5/weather?q=T%C3%B6r%C3%B6kszentmikl%C3%B3s&appid=fa7e76863d7bd04e06e348ab8e1973de')
        .then(response => response.json()) 
        .then(data => {
            var nameValue = data['name'];
            var categoryValue = data['weather'][0]['main'];
            var tempValue = data['main']['temp'];
            var descValue = data['weather'][0]['description'];
            var tempCelcius= Math.abs(tempValue - 273.15).toFixed(2);

            name1.innerHTML = nameValue;
            category.innerHTML = categoryValue;
            temp.innerHTML = tempCelcius;
            desc.innerHTML = descValue;

            document.body.setAttribute("category", categoryValue);
            
            // 切换对应天气的视频背景
            if(videoMap[categoryValue]) {
                bgVideo.src = videoMap[categoryValue];
                bgVideo.load(); // 重新加载新视频源
                bgVideo.play().catch(err => console.log('视频播放失败，已显示兜底背景', err));
            }
        })
        .catch(err => alert("天气数据获取失败!"))
    </script>
</body>
</html>

注意事项 #

• 视频文件建议优先使用H.264编码的MP4格式，兼容所有主流浏览器
• 视频文件尽量压缩到10MB以内，避免页面加载过慢
• 必须保留video标签的muted属性，现代浏览器默认禁止非静音的媒体自动播放
• 如果需要支持更多天气类型（比如雾、沙尘等），只需要在videoMap里新增对应键值和视频路径即可

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