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

为为为什么

发布于 2022-08-06 09:35:04

1.6K00

代码可运行

文章被收录于专栏：又见苍岚又见苍岚

运行总次数：0

代码可运行

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

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

<% } %>

作用为：