HTML网页中插入视频之视频标签的使用方法

  介绍

这篇文章主要介绍了HTML网页中插入视频之视频标签的使用方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

现在如果要在页面中使用视频标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(歌剧,Mozilla, Chrome),支持H。264的(Safari, IE 9, Chrome),都不支持的(IE 6、7、8)。好吧,现在让我们从技术层面来认识HTML 5的视频,包括视频标签的使用,视频对象可以用到的媒介属性和方法,以及媒介事件。

<强>视频标签的使用

视频标签含有src,海报,预加载,播放,循环,控制,宽度、高度等几个属性,以及一个内部使用的标签& lt; source> .Video标签内除了可以包含& lt; source>标签外,还可以包含当指定的视频都不能播放时,返回的内容。

<强> (1)src属性和海报属性

你能想象src属性是用来干啥的,跟& lt; img>标签的一样,这个属性用于指定视频的地址。而海报属性用于指定一张图片,在当前视频数据无效时显示(预览图)。视频数据无效可能是视频正在加载,可能是视频地址错误等等。

& lt; video 宽度=?58”;   ,身高=?44”,https://www.yisu.com/zixun/src=" http://www.php.cn/images/first.mp4 "海报=" https://cache.yisu.com/upload/information/20210204/90/2904.jpg "播放="播放">

<强>(2)预加载属性

这个属性也能通过名字了解用处,此属性用于定义视频是否预加载。属性有三个可选择的值:没有,元数据,汽车。如果不使用此属性,默认为汽车。

& lt; video 宽度=?58”;   ,身高=?44”,https://www.yisu.com/zixun/src=" http://www.php.cn/images/first.mp4 "海报=" https://cache.yisu.com/upload/information/20210204/90/2904.jpg "播放="播放"预加载="没有">

没有:不进行预加载。使用此属性值,可能是页面制作者认为用户不期望此视频,或者减少HTTP请求。

元数据:部分预加载。使用此属性值,代表页面制作者认为用户不期望此视频,但为用户提供一些元数据(包括尺寸,第一帧,曲目列表,持续时间等等).

汽车:全部预加载。

<强>(3)播放属性

又是一个看名字知道用处的属性.Autoplay属性用于设置视频是否自动播放,是一个布尔属性。当出现时,表示自动播放,去掉是表示不自动播放。

& lt; video 宽度=?58”;   ,身高=?44”,https://www.yisu.com/zixun/src=" http://www.php.cn/images/first.mp4 "海报=" https://cache.yisu.com/upload/information/20210204/90/2904.jpg "播放="播放"预加载="没有">

注意,HTML中布尔属性的值不是真和假。正确的用法是,在标签中使用此属性表示,此时属性要么没有值,要么其值恒等于他的名字(此处,自动播放为& lt;视频播放/祝辞或者& lt;视频播放=安シ拧?祝辞);而在标签中不使用此属性表示假(此处不进行自动播放为& lt;视频/祝辞)。

<>强(4)循环属性

& lt; video 宽度=?58”;   ,身高=?44”,https://www.yisu.com/zixun/src=" http://www.php.cn/images/first.mp4 "海报=" https://cache.yisu.com/upload/information/20210204/90/2904.jpg "播放=安シ拧毖?把贰?

一目了然,循环属性用于指定视频是否循环播放,同样是一个布尔属性。

<强>(5)控制属性

& lt; video 宽度=?58”;   ,身高=?44”,https://www.yisu.com/zixun/src=" http://www.php.cn/images/first.mp4 "=" https://cache.yisu.com/upload/information/20210204/90/2904.jpg "播放=安シ拧焙1ㄔぜ釉?懊挥小笨刂?"控制">

控件属性用于向浏览器指明页面制作者没有使用脚本生成播放控制器,需要浏览器启用本身的播放控制栏。

控制栏须包括播放暂停控制、播放进度控制,音量控制等等。

每个浏览器默认的播放控制栏在界面上不一样,由于我浏览器的诡异问题,Firefox和Safari的视频标签不正常,所以这两个只能在网上找截图了。

<强>(6)宽度属性和高度属性

属于标签的通用属性了,这个不用多说。

<强>(7)源标签

& lt; video 宽度=?58”;   ,身高=?44“,海报=癶ttps://cache.yisu.com/upload/information/20210204/90/2904.jpg",播放=癮utoplay",预加载=皀one",控制=癱ontrols"在https://www.yisu.com/zixun/& lt; source  src=" http://www.php.cn/images/first.ogv "/>

HTML网页中插入视频之视频标签的使用方法