这里是有新媒之声给大家带来的html5教程
话不多说直接看效果图
首先我们先创建一个html
我们再建一个存放视频背景的文件夹video
我们给建好的html写入基本代码
然后我们再把作为背景网站的视频拷贝到video这个文件夹下
我们在给刚刚建好的html写入视频代码
效果如下
并未网页全屏，而且视频重复播放
别急现在我们给视频添加样式，使它成为名副实在的视频背景
我们给视频代码写一个class=\"大众index-video\"大众
我们在head头写上css样式
我们现在再来看看效果
现在网页视频因此全屏播放并且你可以在上面写上其它的效果，比如说导航栏之类的，由于现在视频已经成为了我们网页的背景。
现在我们在head加上跳转代码
现在就让我们回顾一下须要用到那些代码和把稳的要去
body体里
<body>
<!--autoplay 属性设置或返覆信视频是否在加载后即开始播放-->
<!--true - 指示音视频在加载完成后随即播放-->
<!--false - 默认。指示音视频不应在加载后立即播放。-->
<!--loop:意思是否在网页里加入背景音乐-->
<!--loop=-1便是表示你的背景音乐的循环次数是无限次，直到你关闭网页-->
<video class=\公众index-video\"大众 src=\"大众video/logo.mp4\公众 autoplay=\"大众true\公众 loop=\公众-1\公众></video>
</body>
css样式
<style type=\"大众text/css\公众>
.index-video {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
</style>
跳转代码
<!--http-equiv顾名思义，相称于http的文件头浸染，它可以向浏览器传回一些有用的信息，以帮助精确和精确地显示网页内容，与之对应的属性值为content，content中的内容实在便是各个参数的变量值。-->
<!--meat标签的http-equiv属性语法格式是：＜meta http-equiv=\"大众参数\"大众 content=\"大众为跳转韶光+跳转网址\公众content=\"大众8;url=http://www.baidu.com\"大众＞//为八秒后跳转到百度网站-->
<meta http-equiv=\"大众refresh\"大众 content=\"大众8;url=http://www.baidu.com\"大众 />
<meta charset=\公众utf-8\"大众>//网站编码utf-8为通用的国际代码
<meta http-equiv=\公众refresh\"大众 content=\"大众8;url=http://www.baidu.com\"大众 />
//<!--meat标签的http-equiv属性语法格式是：＜meta http-equiv=\"大众参数\"大众 content=\公众为跳转韶光+跳转网址\"大众content=\"大众8;url=http://www.baidu.com\公众＞//为八秒后跳转到百度网站-->
<title>炫酷跳转演示站</title>//为网页标题
position 属性规定元素的定位类型。
position语法：
position : static absolute relative
position参数：
static : 无分外定位，工具遵照HTML定位规则
absolute : 将工具从文档流中拖出，利用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时工具不具有边距，但仍有补白和边框
relative : 工具不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
position解释：
设置工具的定位办法，可以让布局层随意马虎位置绝对定位，掌握盒子工具更加准确。
min-width: 最小宽度; min-height: 最小高度;
width: auto;//宽度为自动
height: auto;//高度为自动
z-index: -100;
//当你定义的CSS中有position属性值为absolute、relative或fixed，
用z-index此取值方可生效。
此属性参数值越大，则被层叠在最上面。
完全代码
