Fluid -2- 随机视频背景切换「这是我参与2022首次更文挑战的第29天，活动详情查看：2022首次更文挑战」。

「这是我参与2022首次更文挑战的第29天，活动详情查看：2022首次更文挑战」。

title: Fluid -2- 随机视频背景切换 mathjax: false date: 2021-08-13 15:00:54 tags: [Hexo, Theme, Fluid] categories: [Hexo, Theme, Fluid]

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

修改思路

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

修改方法

配置文件修改

在主题配置文件中修改 首页 Home Page

#---------------------------
# 首页
# 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：

[
	"https://gitee.com/zywvvd/HexoImages/raw/main/vvd-dell-2021-win-10/20210808220318.mp4",
	"https://gitee.com/zywvvd/HexoImages/raw/main/vvd-dell-2021-win-10/20210808220356.mp4",
	"https://gitee.com/zywvvd/HexoImages/raw/main/vvd-dell-2021-win-10/20210808220415.mp4",
	"https://gitee.com/zywvvd/HexoImages/raw/main/vvd-dell-2021-win-10/20210808220556.mp4",
	"https://gitee.com/zywvvd/HexoImages/raw/main/vvd-dell-2021-win-10/20210808220626.mp4",
	"https://gitee.com/zywvvd/HexoImages/raw/main/vvd-dell-2021-win-10/20210808220640.mp4",
	"https://gitee.com/zywvvd/HexoImages/raw/main/vvd-dell-2021-win-10/20210808220742.mp4"
]

修改layout.ejs

修改 themes/fluid/layout/layout.ejs 模板文件

加载变量时加载 index.banner_video

<%
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

<!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" > 行之后

      <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>

		<% } %>

作用为：

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

运行示例

主题仓库

我修改的仓库在：github.com/zywvvd/hexo…
使用方法与原生fluid一致
额外需要添加的是 index.banner_video 配置项，并修改 js 文件夹中的 json文件内容

参考资料

github.com/fluid-dev/h…