html5视频作为页面背景，无插件

2021-05-30 网页编程网 网页编程网

以下代码是全屏播放，没法自适应大小。如果要实现自适应，要用插件，地址：https://www.52player.cn/Demos/html5videobackgroud/index2.html

<!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>
大家好 
大家好 
大家好 
大家好 
大家好 
大家好 
<video autoplay loop muted>
 <source src="https://hddpm.quxianchang.com/images/danmu2016/danmu_bg.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</body>
</html>

阅读原文

阅读 2614

123 显示电脑版