一个响应式视频背景引导页的实现
壹 · 缘起
这篇文章发表前这个小网页已上线 点击上方导航栏-主题页即可体验
本站以前就有一个引导页 具体是从TomyJan这位佬那里直接抄过来的
但很可惜 年久失修 用的很多资源js文件都过期了 遂决定重写这个引导页
贰 · 实现
1. 根据设备屏幕宽度自动选择最佳视频源
- 在不同设备上播放->横屏视频靠直接填充在竖屏设备上显然不是最优解 只能人工提前剪出两个视频版本
- 以下是Code
CodeBlock Loading...
2.静音实现
- 通过JavaScript控制视频的muted属性
CodeBlock Loading...
3. 悬浮信息框设计
CodeBlock Loading...
- 自定义字体标题(@font-face引入)
4.响应式设计策略
CodeBlock Loading...
5.上线
目前最理想的就是阿里云的 OSS 来直接托管这类静态网页 追求极致速度可以绑上 CDN
费用低 一年下来我的 CDN 缴费超不过几块钱 即使受到攻击刷量 也可以少往账户里面充点钱 扣完直接熔断服务