主要用到了video标签，css样式，原理是先将video标签利用position:fixed;使video标签脱离文档流，在将他的z-index设置为最低的，比如-9999。再插入的内容自然就覆盖在视频上面了。

1.首先，将video插入到网页中，宽度设置为100%，其余的设置按照H5标准根据需求来设置。比如进入网页自动播放(autoplay)、循环播放(loop) 、静音(muted)等。代码如下：

2.css设置video样式，代码如下：

video{

position: fixed;

z-index: -9999;

-webkit-filter: grayscale(100%);

}

3.然后就可以在video背景区域添加想要的布局了，

html代码如下:

我是video背景

css代码如下：

div{

width:500px;

height: 300px;

font-size: 8em;

color: yellow;

}

4.如果想要调整video的播放速度，可以使用playbackRate属性来实现，代码如下：

var video= document.querySelector('video');

video.playbackRate = 0.5;

完整代码如下图：