壹 · 缘起

这篇文章发表前这个小网页已上线点击上方导航栏-主题页即可体验

本站以前就有一个引导页具体是从TomyJan这位佬那里直接抄过来的

但很可惜年久失修用的很多资源js文件都过期了遂决定重写这个引导页

贰 · 实现

1. 根据设备屏幕宽度自动选择最佳视频源

在不同设备上播放->横屏视频靠直接填充在竖屏设备上显然不是最优解只能人工提前剪出两个视频版本
以下是Code

function setVideoSource() {
    // 判断设备类型（768px为手机/平板分界点）
    const isMobile = window.innerWidth <= 768;
    // 设置对应视频源
    const mobileVideo = '';
    const desktopVideo = '';
    const videoSource = document.createElement('source');
    videoSource.src = isMobile ? mobileVideo : desktopVideo;
    videoSource.type = 'video/mp4';
    video.innerHTML = '';
    video.appendChild(videoSource);
    video.load();
    video.play().catch(error => {
        console.log('视频播放失败:', error);
    });
}

// 初始加载和窗口大小变化时重新加载
setVideoSource();
window.addEventListener('resize', setVideoSource);

2.静音实现

通过JavaScript控制视频的muted属性

// 获取DOM元素
const video = document.getElementById('bg-video');
const muteToggle = document.getElementById('mute-toggle');
const muteIcon = document.getElementById('mute-icon');

// 初始状态：静音
video.muted = true;

// 点击事件监听
muteToggle.addEventListener('click', function() {
    // 切换静音状态
    video.muted = !video.muted;
    
    // 更新图标
    muteIcon.src = video.muted 
        ? "https://www.gwy.fun/zhan/mute.png"
        : "https://www.gwy.fun/zhan/unmute.png";
});

3. 悬浮信息框设计

.content-box {
    /* 半透明白色背景 */
    background: rgba(15, 23, 42, 0.65);
    
    /* 毛玻璃效果 */
    backdrop-filter: blur(10px);
}

/* 悬浮动画 */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

自定义字体标题（@font-face引入）

4.响应式设计策略

/* 平板设备 */
@media (max-width: 768px) {
    .content-box {
        padding: 25px 15px;
        max-width: 360px;
    }
    /* 调整字体大小和元素间距 */
}

/* 手机设备 */
@media (max-width: 480px) {
    .content-box {
        max-width: 320px;
    }
    /* 垂直排列底部链接 */
    .footer-row {
        flex-direction: column;
    }
}

5.上线

目前最理想的就是阿里云的 OSS 来直接托管这类静态网页追求极致速度可以绑上 CDN

费用低一年下来我的 CDN 缴费超不过几块钱即使受到攻击刷量也可以少往账户里面充点钱扣完直接熔断服务

1. 根据设备屏幕宽度自动选择最佳视频源

在不同设备上播放->横屏视频靠直接填充在竖屏设备上显然不是最优解只能人工提前剪出两个视频版本

以下是Code

function setVideoSource() {
    // 判断设备类型（768px为手机/平板分界点）
    const isMobile = window.innerWidth <= 768;
    // 设置对应视频源
    const mobileVideo = '';
    const desktopVideo = '';
    const videoSource = document.createElement('source');
    videoSource.src = isMobile ? mobileVideo : desktopVideo;
    videoSource.type = 'video/mp4';
    video.innerHTML = '';
    video.appendChild(videoSource);
    video.load();
    video.play().catch(error => {
        console.log('视频播放失败:', error);
    });
}

// 初始加载和窗口大小变化时重新加载
setVideoSource();
window.addEventListener('resize', setVideoSource);

2.静音实现

通过JavaScript控制视频的muted属性

// 获取DOM元素
const video = document.getElementById('bg-video');
const muteToggle = document.getElementById('mute-toggle');
const muteIcon = document.getElementById('mute-icon');

// 初始状态：静音
video.muted = true;

// 点击事件监听
muteToggle.addEventListener('click', function() {
    // 切换静音状态
    video.muted = !video.muted;
    
    // 更新图标
    muteIcon.src = video.muted 
        ? "https://www.gwy.fun/zhan/mute.png"
        : "https://www.gwy.fun/zhan/unmute.png";
});

3. 悬浮信息框设计

.content-box {
    /* 半透明白色背景 */
    background: rgba(15, 23, 42, 0.65);
    
    /* 毛玻璃效果 */
    backdrop-filter: blur(10px);
}

/* 悬浮动画 */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

自定义字体标题（@font-face引入）

4.响应式设计策略

/* 平板设备 */
@media (max-width: 768px) {
    .content-box {
        padding: 25px 15px;
        max-width: 360px;
    }
    /* 调整字体大小和元素间距 */
}

/* 手机设备 */
@media (max-width: 480px) {
    .content-box {
        max-width: 320px;
    }
    /* 垂直排列底部链接 */
    .footer-row {
        flex-direction: column;
    }
}

一个响应式视频背景引导页的实现

壹 · 缘起

贰 · 实现

1. 根据设备屏幕宽度自动选择最佳视频源

2.静音实现

3. 悬浮信息框设计

4.响应式设计策略

5.上线

一个响应式视频背景引导页的实现

壹 · 缘起

贰 · 实现

1. 根据设备屏幕宽度自动选择最佳视频源

2.静音实现

3. 悬浮信息框设计

4.响应式设计策略

5.上线