一个响应式视频背景引导页的实现
壹 · 缘起
这篇文章发表前这个小网页已上线 点击上方导航栏-主题页即可体验
本站以前就有一个引导页 具体是从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 缴费超不过几块钱 即使受到攻击刷量 也可以少往账户里面充点钱 扣完直接熔断服务