关于网站做背景视频的简单解决方案

当我们打开一个网站时,倘若是直接看到一个动态的背景,我想一定会比一个图片或者轮播图片要感觉更赞的。

那我们就开始吧,看看会有什么样的坑在等着…

思路:
利用html的video标签,做背景。

对,就是这样。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>test</title>
</head>
<body>
<!-- <video preload autoplay loop muted src="v.mp4"> -->
<div class="web-bg">
<video autoplay loop src="v.mp4">
<source src="v.mp4" type="video/mp4">
</video>
</div>
</body>
</html>

接下来,就是调整样式:
一般我们做视频背景的时候都是全屏铺满的(该文也是按照这个思路来写的),所以

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
html,body{
width: 100%;
height: 100%;
margin: 0;
}
.web-bg{
width: 100%;
height: 100%;
position: fixed;
z-index: 0;
top: 0;
left: 0;
}
.web-bg video{
display: block;
width: 100%;
height: 100%;
}

v1.jpg
成功了吗?还没有。视频并没有全屏,但我们明明把宽度设置了100%。其实对于video标签来说已经是满屏了,只是视频的源数据中的宽高比和屏幕的宽高比不等,所以才会显示左右两边有黑边。

对于这种情况:当视频的宽高比小于屏幕的宽高比时,就会出现上面截图的情况;反之,则是上下出现黑边。

那怎么解决这个问题呢?

记不记得背景图片size的一个属性值:cover,虽然视频并没有什么cover属性,不过我们可以用样式实现这样的效果。

通过js获取到video原始的宽高比VP以及屏幕的宽高比WP,
当VP>WP时,设置video的height:100%,width:auto;
当VP<WP时,设置video的height:auto,width:100%;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.onload = function () {
var $v = $('video'), VP, WP;
$v.oncanplay = function () {
VP = $v.videoWidth / $v.videoHeight;
WP = window.innerWidth / window.innerHeight
if (VP > WP) {
$v.style.width = 'auto';
$v.style.height = '100%';
}
if (VP < WP) {
$v.style.width = '100%';
$v.style.height = 'auto';
}
}
function $(dom) {
return document.querySelector(dom)
}
}

嗯,这是可以的。但还是不够完美,因为你会发现,视频没有加载好的那段时间,你还是会看到黑边。怎么办呢?

你要先想想吗

接下来,为了避免这个问题,最简单的办法就是先默认把这个背景层给隐藏掉。然后再canplay的监听函数中再显示就行了

1
2
// 在oncanplay的函数中加一句:
$('.web-bg').style.display = 'block';

而在原来的style样式中,把类web-bg设置成display: none;

或者:把video的背景设置成一张默认的图片,并且background-size设置成cover。

很好!但还没有结束…

当你用safari浏览器打开看的时候,你会发现视频并没有播放,而是停留在第一帧上。当然如果你用的是一个有音轨且有声音的视频时候也会在chrome浏览器上出现这个问题(chrome浏览器可以在video上加一个muted,也就是我上面注释的那行)。

虽然不支持自动播放,但你还是可以通过手势用js去触发视频播放的,但对于视频背景好像并没有什么鸟用。

既然不支持,那就要做兼容处理了。最简单的就是用一张背景图代替视频,刚好上面我们提到了给video设置背景图片。另外还有一种办法就是用gif图片,但可能不会很清晰,如果对背景的清晰度要求不高的还是可以用的。

再或者…

把video放到一个单独的页面里,然后利用iframe引入到页面中,有惊喜哦。这也可以?? 是的。