您的位置 首页 > 数码极客

html5如何插入视频

大家好

这里是有新媒之声给大家带来的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; 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=;>//为八秒后跳转到百度网站-->

<meta http-equiv="refresh" content="8;url=; />

<meta charset="utf-8">//网站编码utf-8为通用的国际代码

<meta http-equiv="refresh" content="8;url=; />

//<!--meat标签的http-equiv属性语法格式是:<meta http-equiv="参数" content="为跳转时间+跳转网址"content="8;url=;>//为八秒后跳转到百度网站-->

<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此取值方可生效。

此属性参数值越大,则被层叠在最上面。

完整代码

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“html5如何插入视频”边界阅读