Fluid -2- 随机视频背景切换

本文最后更新于:2022年8月10日 上午

fluid 主题简洁舒适,入场背景图片恢弘大气,但视频可能更好看,尝试自己对主题做了修改,本文记录修改方法和效果。

修改思路

  • 向主题加入新的配置项 index.banner_video,控制是否使用视频背景
  • layout.ejs 模板中获取该变量值,根据开关是否打开在模板层面决定是否启用视频背景
  • 创建 json 文件收集视频背景链接
  • 当开启视频背景时,创建div,id为banner_video_insert
  • js 读取 json 文件,创建视频控件语句,加入到创建的div中,实现视频显示,覆盖图片背景
  • 动态监控窗口变化,适时调整视频属性,使得任意窗口大小可以全屏显示视频
  • 识别是否是手机端访问,手机端访问改为使用图像做背景

修改方法

配置文件修改

  • 在主题配置文件中修改 首页 Home Page
1
2
3
4
5
6
7
8
9
10
11
12
#---------------------------
# 首页
# Home Page
#---------------------------
index:
# 首页 Banner 头图,可以是相对路径或绝对路径,以下相同
# Path of Banner image, can be a relative path or an absolute path, the same on other pages
banner_img: /img/default.png

# 首页 Banner 使用随机视频
# true 开启 false 关闭
banner_video: true
  • 加入:index.banner_video: true

引入 jquery.js

  • 为了 读取json 需要加载jquery.js

  • 保险起见,我下载了最新的 jquery.js 放在了 fluid/source/js 文件夹中

  • 可以在代码中使用 <script type="text/javascript" src="/vvd_js/jquery.js"></script> 加载

创建视频url json

  • 例如我的,文件在fluid/source/js文件夹,命名为video_url.json
1
2
3
4
5
6
7
8
9
[
"https://101.43.39.125/HexoFiles/vvd-dell-2021-win-10/20210808220318.mp4",
"https://101.43.39.125/HexoFiles/vvd-dell-2021-win-10/20210808220356.mp4",
"https://101.43.39.125/HexoFiles/vvd-dell-2021-win-10/20210808220415.mp4",
"https://101.43.39.125/HexoFiles/vvd-dell-2021-win-10/20210808220556.mp4",
"https://101.43.39.125/HexoFiles/vvd-dell-2021-win-10/20210808220626.mp4",
"https://101.43.39.125/HexoFiles/vvd-dell-2021-win-10/20210808220640.mp4",
"https://101.43.39.125/HexoFiles/vvd-dell-2021-win-10/20210808220742.mp4"
]

修改layout.ejs

  • 修改 themes/fluid/layout/layout.ejs 模板文件
加载变量时加载 index.banner_video
1
2
3
4
5
6
7
8
<%
var subtitle = page.subtitle || page.title
var banner_img = page.banner_img || theme.index.banner_img
var banner_img_height = page.banner_img_height || theme.index.banner_img_height
var banner_mask_alpha = page.banner_mask_alpha || theme.index.banner_mask_alpha
var colorSchema = theme.dark_mode && theme.dark_mode.enable && theme.dark_mode.default ? theme.dark_mode.default : ''
var banner_video = theme.index.banner_video
%>
加载 jquery.js
1
2
3
4
<!DOCTYPE html>
<html lang="<%= config.language %>" <%= colorSchema ? `data-default-color-scheme="${colorSchema}"` : '' %>>
<script type="text/javascript" src="/vvd_js/jquery.js"></script>

加入核心模板代码
  • <div class="full-bg-img" > 行之后
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
    <div class="full-bg-img" >

<% if(banner_video){ %>
<div id="banner_video_insert">
</div>
<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.children[0].clientHeight

var width = document.body.children[0].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){
$.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]
video_html_res = "<video id='video_item' style='position: absolute;' muted='muted' src=" + video_url + " autoplay='autoplay' loop='loop'></video>"

document.getElementById("banner_video_insert").innerHTML = video_html_res;
set_video_attr('video_item')
}

});

if (!isMobile){
window.onresize = function(){
set_video_attr('video_item')
}
}
</script>

<% } %>

作用为:

  1. 读取json
  2. 判断是否加载视频背景
  3. 创建视频背景控件
  4. 插入视频链接
  5. 监控窗口变化
  6. 适时调整视频控件属性
  7. 判断设备类型决定是否执行背景视频模块

运行示例

主题仓库

参考资料


Fluid -2- 随机视频背景切换
https://www.zywvvd.com/notes/hexo/theme/fluid/fluid-update/fluid-update/
作者
Yiwei Zhang
发布于
2021年8月13日
许可协议