vlambda博客
学习文章列表

【VUE】如何实现html5视频作为页面背景

之前的代码因为chrome的升级,视频文件无法自动播放了。在这里更新一下源码,亲测可用。



<!DOCTYPE HTML>

<html>

<style>

 *{  

            margin: 0px;  

            padding: 0px;  

        }  

        video{  

            position: fixed;  

            right: 0px;  

            bottom: 0px;  

            min-width: 100%;  

            min-height: 100%;  

            height: auto;  

            width: auto;  

            /*加滤镜*/

            /*filter: blur(15px); //背景模糊设置 */

            /*-webkit-filter: grayscale(100%);*/  

            /*filter:grayscale(100%); //背景灰度设置*/  

            z-index:-11

        }  

        source{  

            min-width: 100%;  

            min-height: 100%;  

            height: auto;  

            width: auto;  

        } 

p{

    width: 100%;

text-align: center;

font-size: 40px;

color: white;

}

</style>

<body>

<p>大家好 </p>

<p>大家好 </p>

<p>大家好 </p>

<p>大家好 </p>

<p>大家好 </p>

<p>大家好 </p>

<video autoplay loop muted>

  <source type="video/mp4"  />

Your browser does not support the video tag.

</video>

 

</body>

</html>