您的位置:首页 > Web前端 > 其它 > 正文

html5 video标签

更多 时间:2015-6-15 类别:Web前端 浏览量:1823

html5 video标签

html5 video标签

Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性,以及一个内部使用的标签<source>。Video标签内除了可以包含<source>标签外,还可以包含当指定的视频都不能播放时,返回的内容。

 

 一、Video标签支持的部分属性列举

 

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
autobuffer Autobuffer 在网页显示时,该二进制属性表示是由用户代理(浏览器)自动缓冲的内容,还是由用户使用相关API进行内容缓冲。
poster url图片地址 当视频未响应或缓冲不足时,该属性值链接到一个图像。该图像将以一定比例被显示出来。

 

二、Video标签属性的详细介绍

 

1、src属性和poster属性

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

 

2、preload属性

(1)、这个属性也能通过名字了解用处,此属性用于定义视频是否预加载。

(2)、属性有三个可选择的值:none、metadata、auto。如果不使用此属性,默认为auto。

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

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

Auto:全部预加载。

 

3、autoplay属性

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

注意,HTML中布尔属性的值不是true和false。正确的用法是,在标签中使用此属性表示true,此时属性要么没有值,要么其值恒等于他的名字(此处,自动播放为<video autoplay />或者<video autoplay=”autoplay” />);而在标签中不使用此属性表示false(此处不进行自动播放为<video />)。

 

4、loop属性

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

5、controls属性


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

(2)、控制栏须包括播放暂停控制,播放进度控制,音量控制等等。
(3)、每个浏览器默认的播放控制栏在界面上不一样。由于我浏览器的诡异问题,Firefox和Safari的Video标签不正常,所以这两个只能在网上找截图了。
 

 

三、video标签的内部source标签


1、Source标签用于给媒体(因为audio标签同样可以包含此标签,所以这儿用媒体,而不是视频)指定多个可选择的(浏览器最终只能选一个)文件地址,且只能在媒体标签没有使用src属性时使用。

2、浏览器按source标签的顺序检测标签指定的视频是否能够播放(可能是视频格式不支持,视频不存在等等),如果不能播放,换下一个。此方法多用于兼容不同的浏览器。Source标签本身不代表任何含义,不能单独出现。


3、video标签包含src、type、media三个属性


(1)、src属性:用于指定媒体的地址,和video标签的一样。
(2)、Type属性:用于说明src属性指定媒体的类型,帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。

(3)、Media属性:用于说明媒体在何种媒介中使用,不设置时默认值为all,表示支持所有媒介。

 

四、html5 video标签实例

 

  • 
    <!DOCTYPE HTML>
    <html>
    <body>
    <video width="320" height="240" controls="controls">
        <source src="movie.ogg" type="movie.ogg">
        <source src="movie.mp4" type="movie.mp4">
    你的浏览器不支持html5的video标签
    </video>
    </body>
    </html>
    
    		
  •  

    实例说明

    1、control 属性供添加播放、暂停和音量控件。
    2、<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。
    3、video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式


     

    标签:html5
    您可能感兴趣