Fluid -13- 视频背景 fixed

本文最后更新于:2022年7月4日 上午

受到 七夏浅笑 小姐姐博客的启发,决定把自己的视频背景做成固定不动的,本文记录相关内容。

背景

已经实现上述功能的基础版本主题代码 version2.0

目标:

  1. 背景视频固定
  2. 视频随机切换
  3. 优先显示视频预加载图像
  4. 不影响博客其余部分正常显示

实现过程

我不是学前端出身,实现功能全屏直觉,为了实现效果抛弃了一切规范和逻辑,实现仅供参考,不负责任

思路

  1. 主要修改 fluid/layout/layout.ejs文件,将背景图像和视频从 banner 的 div 中拿出来,放在body的开头
  2. 创建三层 div,分别是 mask, image, video, 为他们设置不通的 z-index,保证图像顺序为上述顺序
  3. 动态调整 image, video 的图像链接和尺寸,目的是让图像视频时刻撑满屏幕并且随机切换
  4. 修改 source/css/_pages/_base/_widget/banner.styl 文件,使得原始的mask透明度为0,新建mask设置黑色,透明度0.4
  5. 修改目录文字颜色,浅色比较合适
  6. 修改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>
...
  • 在页面加载过程中随机选择视频、图像的链接加入新建的 video img

    此处不能用 background属性,不然无法设置 z-index

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

参考资料


Fluid -13- 视频背景 fixed
https://www.zywvvd.com/notes/hexo/theme/fluid/fluid-video-bg-fixed/fluid-video-bg-fixed/
作者
Yiwei Zhang
发布于
2022年1月23日
许可协议