之前的代码因为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>

关注公众号获取更多内容,有问题也可在公众号提问哦:

 

强哥叨逼叨

叨逼叨编程、互联网的见解和新鲜事

 

Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐