html5视频作为页面背景，无插件-网页编程网

当前位置：主页 >> 网页特效 >> 正文

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

阅读：2943 输入：2021-05-30 19:08:45

以下代码是全屏播放，没法自适应大小。如果要实现自适应，要用插件，地址：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>

上一篇：修改php文件上传的大小限制upload_max_filesize的方法
下一篇：python爬高德地图，根据城市编号查询天气预报并保存成txt

相关阅读: div可脱离文档流的方法; css实现a标签按钮化; css3中grid实现键盘布局