html5视频作为页面背景

250 阅读1分钟
原文链接: mp.weixin.qq.com

之前强哥在CSDN公众号上发过一个《html5视频作为页面背景》,当时的源码是没问题的,兼容IE和Chrome浏览器,可是后来因为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;              /*加滤镜*/              /*-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>

还有不懂得可以后台留言哦,强哥看到了会及时回复的。

强哥叨逼叨

叨逼叨编程、互联网的

见解和新鲜事