之前的代码因为chrome的升级,视频文件无法自动播放了。在这里更新一下源码,亲测可用。
复制代码并且替换视频文件即可。当然,比较懒得同学,扫码文末的二维码,关注公众号,在后台回复:小视频。即可获取源代码和附带的mp4视频文件哦。
<!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 src="./movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</body>
</html>
关注公众号获取更多内容,有问题也可在公众号提问哦:
强哥叨逼叨
叨逼叨编程、互联网的见解和新鲜事