【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>