HTML5中将video设置为背景的方法

　　主要用到了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代码如下:

<div>
我是video背景
</div>

css代码如下：

div{
                            width:500px;
                            height: 300px;
                            font-size: 8em;
                            color: yellow;
                         }

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

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

video.playbackRate = 0.5;

</script>

　　完整代码如下图：

巴特西

HTML5中将video设置为背景的方法

最新文章

热门文章