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

时间:2024-03-04 07:37:04

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

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

                  <video width="100%" autoplay="autoplay" loop="loop" muted="muted">
                           <source src="video/video.mp4" type="video/mp4"></source>
                  </video>

        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属性来实现,代码如下:

                <script>

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

                     video.playbackRate = 0.5;

                </script>

  完整代码如下图: