本文最后更新于：2023年12月5日 下午
受到 七夏浅笑 小姐姐博客的启发，决定把自己的视频背景做成固定不动的，本文记录相关内容。
背景
已经实现上述功能的基础版本主题代码 version2.0
目标：
- 背景视频固定
- 视频随机切换
- 优先显示视频预加载图像
- 不影响博客其余部分正常显示
实现过程
我不是学前端出身，实现功能全屏直觉，为了实现效果抛弃了一切规范和逻辑，实现仅供参考，不负责任
思路
- 主要修改
fluid/layout/layout.ejs文件，将背景图像和视频从 banner 的 div 中拿出来，放在body的开头
- 创建三层 div，分别是 mask, image, video, 为他们设置不通的 z-index，保证图像顺序为上述顺序
- 动态调整 image, video 的图像链接和尺寸，目的是让图像视频时刻撑满屏幕并且随机切换
- 修改
source/css/_pages/_base/_widget/banner.styl 文件，使得原始的mask透明度为0，新建mask设置黑色，透明度0.4
- 修改目录文字颜色，浅色比较合适
- 修改footer文字颜色，浅色比较合适，和步骤五相同的颜色比较好
具体修改 ：https://github.com/zywvvd/hexo-theme-fluid/commit/4b26111d5961e30e3483825dad68f6960759b7fb
核心调整
fluid/layout/layout.ejs 文件
- 在 body 刚开始设置 div 包裹 mask, image, video
1
2
3
4
5
6
7
8
9
10
11
12
| ...
<body>
<div id="banner_video_insert">
</div>
<div>
<div class='real_mask'></div>
<div id="banner_video_insert">
</div>
<div id='vvd_banner_img'>
</div>
</div>
...
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
| <% if(banner_video){ %>
<script>
var ua = navigator.userAgent;
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
isAndroid = ua.match(/(Android)\s+([\d.]+)/),
isMobile = isIphone || isAndroid;
function set_video_attr(id){
var height = document.body.clientHeight
var width = document.body.clientWidth
var video_item = document.getElementById(id);
if (height / width < 0.56){
video_item.setAttribute('width', '100%');
video_item.setAttribute('height', 'auto');
} else {
video_item.setAttribute('height', '100%');
video_item.setAttribute('width', 'auto');
}
}
$.getJSON('/vvd_js/video_url.json', function(data){
if (!isMobile){
var video_list_length = data.length
var seed = Math.random()
index = Math.floor(seed * video_list_length)
video_url = data[index][0]
pre_show_image_url = data[index][1]
banner_obj = document.getElementById("banner")
banner_obj.style.cssText = "background: url('" + pre_show_image_url + "') no-repeat; background-size: cover;"
vvd_banner_obj = document.getElementById("vvd_banner_img")
vvd_banner_content = "<img id='banner_img_item' src='" + pre_show_image_url + "' style='height: 100%; position: fixed; z-index: -999'>"
vvd_banner_obj.innerHTML = vvd_banner_content
video_html_res = "<video id='video_item' style='position: fixed; z-index: -888;' muted='muted' src=" + video_url + " autoplay='autoplay' loop='loop'></video>"
document.getElementById("banner_video_insert").innerHTML = video_html_res;
set_video_attr('video_item')
set_video_attr('banner_img_item')
}
});
if (!isMobile){
window.onresize = function(){
set_video_attr('video_item')
}
}
</script>
<% } %>
|
- 其中很重要的是需要为video 和 img 元素设置
position: fixed; z-index: num; 属性
- 在
source/css/_pages/_base/_widget/banner.styl 文件中加入新mask的css代码，配置position: fixed; z-index: num; 属性
1
2
3
4
5
6
| .real_mask
position fixed
width 100%
height 100%
background-color rgba(0, 0, 0, 0.4)
z-index -777
|
- 需要保证
z-index 值，mask > video > image，这样 mask 一直生效，image 预加载会正常显示，视频加载出来后会覆盖图像
- position: fixed 这句话是核心
周边调整
- 调整文章目录导航文字颜色
- 调整 footer 文字颜色
比较简单了，可以参考我的代码修改
完整主题
version3.0
参考资料
文章链接：
https://www.zywvvd.com/notes/hexo/theme/fluid/fluid-video-bg-fixed/fluid-video-bg-fixed/
