视频做背景

原创 2016年08月29日 15:32:03
<!doctype html><!--声明当前文档为html文档-->
<html lang="en"><!--语言为英语-->
	<head><!--头部-->
		<meta charset="UTF-8"><!--字符编码:utf-8国际编码  gb2312中文编码-->
		<meta name="Keywords" content="关键词">
		<meta name="Description" content="描述">
		<title>Document</title>
		<style>/*css样式表的衣柜*/
			html,body,video,ul,li,div{
				margin:0px;
				padding:0px;
			}
			/*让视频沾满整个屏幕*/
			#bgvid { 
				position:fixed; 
				right:0; 
				bottom:0;
				min-width:100%;
				min-height:100%;
				width:auto; height:auto; 
				z-index:-100;
			}
			li{
				list-style:none;
			}
			#header{
				width:600px;
				height:50px;
			}
			#header ul li{
				background:rgba(100,100,100,0.5);
				width:100px;
				height:30px;
				color:#f60;
				font-weight:bold;
				font-size:20px;
				line-height:30px;
				float:left;
				text-align:center;
				margin-left:5px;
				cursor:pointer;
			}
			#main{
				width:100%;
				height:1500px;
				border:2px solid red;
				box-sizing:border-box;
			}
		</style>
	</head>

	<body><!--身体-->
		<video autoplay loop  id="bgvid">
			  <source src="sp2.webm" type="video/webm">
			  <source src="sp2.mp4" type="video/mp4">
		</video>
		<div id="header"> 
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul>
		</div>
		<div id="main"></div>
		<script>

		</script>
	</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

使用视频作为背景,全屏展示

html lang="en"> head> meta charset="UTF-8"> title>videotitle> link rel="stylesheet" href...
  • u010303530
  • u010303530
  • 2016年09月13日 14:43
  • 2778

android用视频当做背景

我们经常下载app玩的伙伴们,肯定见过有的app的背景图 是一个动画,或者说看着就是视频。 那么这种功能怎么实现的呢 ,代码我也不一点一点粘贴了 直接给各位同学上链接。 鉴于很多同学 用eclipse...
  • shaoyezhangliwei
  • shaoyezhangliwei
  • 2016年05月30日 16:11
  • 3507

使用视频作为网页背景的技术探讨

使用视频作为网页背景是件很酷的事情,但也是件困难的事情。CSS里的background-image属性只能使用图片、SVG、颜色或渐变色。但从技术讲,我们是可以伪造出一种效果,让视频以背景的角色出现在...
  • qq_15096707
  • qq_15096707
  • 2016年07月16日 13:06
  • 1108

以视频作为网页背景的jQuery插件

一个简单的以视频作为网页背景的jQuery 插件 浏览器支持 现代浏览器全部支持 IE9+ 效果演示地址 作为body背景 演示地址1:http://weber.pub/demo/160905/bod...
  • canglingyue
  • canglingyue
  • 2016年09月06日 10:05
  • 983

html5背景视频使用总结

1、尽量把视频素材压缩,即使高清的背景视频看上去极具诱惑力,但是加载缓慢给人的糟糕体验还是让你觉得会得不偿失的。建议使用1080/720p分辨率,750-1250数据数率,每秒24-25帧的素材。 2...
  • LJF1994
  • LJF1994
  • 2016年04月23日 12:52
  • 4419

使用视频当背景2.0

上次说了《使用视频当背景1.0》,有的人必须使用视频当背景,但是上次的代码风险又颇多,那到底有没有办法解决呢?其实是有的,比较麻烦而已,话不多说,上代码: 最终画面代码 loginwidget.h...
  • fan_xingwang
  • fan_xingwang
  • 2018年01月26日 11:49
  • 15

模仿QQ背景为视频的登录页

模仿QQ有一版的登录页背景是视频,当时觉得很炫酷,这周得空儿把苹果的AVFoundation大致看了一下,然后模仿着效果写了一个小的Demo,代码很少,很好理解。本文中对AVPlayer只是皮毛上的应...
  • xwb0714
  • xwb0714
  • 2017年08月04日 13:42
  • 580

关于实现背景为自动循环播放、无声的、宽度自适应视频的相关问题

前段时间考试忙着复习,现在才开始继续完善创意工坊页面的后续工作。 想要实现的效果如下: 不管什么尺寸或者缩放,它的宽度一直为浏览器窗口的100%; 中间遇到挺多问题: 1.Q:...
  • sinat_38752382
  • sinat_38752382
  • 2017年05月29日 21:59
  • 334

网页嵌入视频背景(mp4当作banner)

网页视频背景
  • fengyu19880219
  • fengyu19880219
  • 2017年05月24日 13:22
  • 1787

使用视频做背景

总是会看到一些用视频做成的背景,那现在也试试吧! html> html lang="en"> head> meta charset="UTF-8"> title>Titlet...
  • qq_38553776
  • qq_38553776
  • 2018年02月06日 09:46
  • 12
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:视频做背景
举报原因:
原因补充:

(最多只允许输入30个字)