之前强哥在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>
还有不懂得可以后台留言哦,强哥看到了会及时回复的。