请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 Video 查看内容

HTML5 Video标签使用说明完整介绍

2013-10-6 20:14| 发布者: admin| 查看: 1610| 评论: 0

摘要: HTML 5的支持者正在推动一个开放的,不需要任何插件的视频标准。这就是HTML 5的新标签带来的构想,他提供了一个嵌入视频(以及与其交互)而不需要类似Flash的私有插件的方法。

2 Video标签的使用

Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性,以及一个内部使用的标签<source>。

Video标签内除了可以包含<source>标签外,还可以包含当指定的视频都不能播放时,返回的内容。

2.1 src属性和poster属性

你能想象src属性是用来干啥的。跟<img>标签的一样,这个属性用于指定视频的地址。

而poster属性用于指定一张图片,在当前视频数据无效时显示(预览图)。视频数据无效可能是视频正在加载,可能是视频地址错误等等。

2.2 preload属性

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

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

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

Auto:全部预加载。

2.3 autoplay属性

Autoplay属性用于设置视频是否自动播放,是一个布尔属性。当出现时,表示自动播放,去掉是表示不自动播放。

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

2.4 loop属性

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

2.5 controls属性

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

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


2.6 width属性和height属性

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

2.7 source标签

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

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

此标签包含src、type、media三个属性。

src属性:用于指定媒体的地址,和video标签的一样。

Type属性:用于说明src属性指定媒体的类型,帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。具体的属性值,请参见W3C的文档

Media属性:用于说明媒体在何种媒介中使用,不设置时默认值为all,表示支持所有媒介。你想到<style>标签的media属性了么?一样一样一样的。

3 媒介属性

媒介属性包括error、currentsrc、networkState、preload、buffered、readyState、seeking、currentTime、startTime、duration、paused、defaultPlaybackRate、playbackRate、played、seekable、ended、autoplay、loop、controls、volume、muted等,可以用于返回或改变媒介的状态。

注意:以下使用到的“media”统一代表一个视频元素。如下图所示:

3.1 error属性

只读属性。使用media.error返回一个MediaError对象表明当前的错误状态,如果没有出错,返回null。

使用media.error.code返回媒介的错误状态,共有4个可能值。

  • MEDIA_ERR_ABORTED(数字值为1):媒体资源获取异常;
  • MEDIA_ERR_NETWORK(数字值为2):网络错误;
  • MEDIA_ERR_DECODE(数字值为3):媒体解码错误;
  • MEDIA_ERR_SRC_NOT_SUPPORTED(数字值为4):视频格式被不支持。

3.2 currentSrc属性

只读属性。使用media.currentSrc返回该媒介标签的src属性值。

3.3 networkState属性

只读属性。使用media.networkState返回媒介的网络状态,共有4个可能值。

  • NETWORK_EMPTY(数字值为0):尚未初始化;
  • NETWORK_IDLE(数字值为1):加载完成,网络空闲;
  • NETWORK_LOADING(数字值为2):视频加载中;
  • NETWORK_NO_SOURCE(数字值为3):加载失败。

3.4 preload属性

可读写属性。使用media.preload返回媒介标签的preload属性值,或者对其进行赋值,改变媒介标签的preload属性值。

3.5 buffered属性

只读属性。使用media.buffered返回一个TimeRanges对象,确认浏览器已缓存媒介文件。

3.6 readyState属性

只读属性。使用media.readyState返回媒介当前播放位置的就绪状态,共有5个可能值。

  • HAVE_NOTHING(数字值为0):当前播放位置无有效媒介资源;
  • HAVE_METADATA(数字值为1):加载中,媒介资源确认存在,但当前位置没有能够加载到有效媒介数据进行播放;
  • HAVE_CURRENT_DATA(数字值为2):已获取到当前播放数据,但没有足够的数据进行播放;
  • HAVE_FUTURE_DATA(数字值为3):已获取到后续播放数据,可以进行播放;
  • HAVE_ENOUGH_DATA(数字值为4):可以进行播放,且浏览器确认媒体数据以某一种速度进行加载,可以保证有足够的后续数据进行播放,而不会使浏览器的播放进度赶上加载数据的末端。

3.7 seeking、seekable属性

均为只读属性。

使用media.seeking返回一个布尔值,表明浏览器是否正在请求数据,ture表示浏览器正在请求数据,false表示浏览器已停止请求。

使用media.seekable发挥一个TimeRanges对象,表明可以对当前媒介资源进行请求。

3.8 currentTime、startTime、duration属性

三者的值均为时间,单位为秒,currentTime为可读写属性,其余两个均为只读属性。

使用media.currentTime返回当前媒介的播放位置,或者对其赋值,改变媒介的播放位置。

对于使用media.currentTime的时候,如果返回的时间超出了浏览器的请求能力,将抛出一个INDEX_SIZE_ERR异常;如果没有选中的媒体资源,将抛出一个INVALID_STATE_ERR异常。

使用media.startTime返回媒介文件播放的开始时间,通常为0。

使用media.duration返回媒介文件总的播放时长。

3.9 played、paused、ended属性

三者均为只读属性。

使用media. played返回一个TimeRanges对象,标明浏览器已播放的媒介资源范围。

使用media.paused返回一个布尔值,表明媒介是否暂停播放,ture表示媒介暂停播放,false表示媒介正在播放。

使用media.ended返回一个布尔值,表明媒介是否已结束,ture表示媒介已经播放完毕,false表示还未播放完毕。


3.10 defaultPlaybackRate、playbackRate属性

两者均为可读写属性。

使用media.defaultPlaybackRate返回媒介默认的播放速率,或对其赋值,改变媒介的默认播放速率。

使用media.playbackRate返回当前的媒介播放速率,或对其赋值,改变当前的媒介播放速率。

3.11 autoplay、loop属性

两者均为可读写属性。

使用media.autoplay返回一个布尔值,表明当前媒介是否设置了自动播放,ture表示当前媒介为自动播放,false表示非自动播放,或对其赋值,设置是否自动播放。

使用media.loop返回一个布尔值,表明当前媒介是否设置了循环播放,ture表示当前媒介设置了循环播放,false表示没有设置循环播放,或对其赋值,设置是否循环播放。

3.12 controls、volume、muted属性

三者均为可读写属性。

使用media.controls返回一个布尔值,表明当前媒介是否使用了浏览器默认的播放控制栏,ture表示加载了,false表示没有加载,或对其赋值,设置是否使用浏览器默认的播放控制栏。

使用media.volume返回当前媒介的音量值,或对其赋值,改变媒介的播放音量,范围为0到1,0相当于静音,1为最大音量。

使用media.muted返回一个布尔值,表明当前媒介播放是否开启静音,ture表示没有开启静音,false表示静音,或对其赋值,设置播放是否静音。

4 媒介方法

4.1 play()、pause()、load()方法

使用media.play()播放视频,并会将media.paused的值强行设为false。

使用media.pause()暂停视频,并会将media.paused的值强行设为ture。

使用media.load()重新载入视频,并会将media.playbackRate的值强行设为media.defaultPlaybackRate的值,且强行将media.error的值设为null。

4.2 canPlayType(type)方法

使用canPlayType(type)方法测试浏览器是否支持特定的媒介类型。其中,type参数和1.1.7节中介绍的type属性是相同的。

方法返回3个可能值(均为浏览器判断的结果)。

  • 空字符串:浏览器不支持此种媒体类型;
  • maybe:浏览器可能支持此种媒体类型;
  • probably:浏览器确定支持此种媒体类型。

5 媒介事件

媒介事件可以作用于各种媒介元素,如视频、音频、图片等,主要包括loadstart、progress、suspend、abort、error、emptied、stalled、play、pause、loadedmetadata、loadeddata、waiting、playing、canplay、canplaythrough、seeking、seeked、timeupdate、ended、ratechange、durationchange、volumechange等事件。

5.1 事件处理方式

一般有两种方式处理事件。

一种是监听的方式:addEventListener(“事件名”,处理函数,处理方式)。例如,如果需要在浏览器对媒介进行播放时执行begin_playing函数,那么可以这样,media. addEventListener(“play”, begin_playing,false)。

另一种是直接赋值的方式:on时间名=处理函数,这是我们相对用的较多的方法,也就是“当XXX事件触发时”。例如,要进行和上面相同的处理,可以这样media.onplay= begin_playing。

5.2 事件介绍

loadstart事件:浏览器开始请求媒介;

progress事件:浏览器正在获取媒介;

suspend事件:浏览器非主动获取媒介数据,但没有加载完整个媒介资源;

abort事件:浏览器在完全加载前中止获取媒介数据;

error事件:获取媒介数据出错;

emptied事件:媒介元素的网络状态突然变为未初始化;

stalled事件:浏览器获取媒介数据异常;

play事件:即将开始播放

pause事件:暂停播放

loadedmetadata事件:浏览器获取完媒介资源的时长和尺寸

loadeddata事件:已加载当前播放位置的媒介数据;

waiting事件:播放由于下一帧无效(例如未加载)而已停止(但浏览器确认下一帧会马上有效);

playing事件:已经开始播放

canplay事件:浏览器能够开始媒介播放,但估计以当前速率播放不能直接将媒介播放完(播放期间需要缓冲);

canplaythrough事件:浏览器估计以当前速率直接播放可以直接播放完整个媒介资源(期间不需要缓冲);

seeking事件:浏览器正在请求数据(seeking属性值为true);

seeked事件:浏览器停止请求数据(seeking属性值为false);

timeupdate事件:当前播放位置(currentTime属性)改变;

ended事件:播放由于媒介结束而停止;

ratechange事件:默认播放速率(defaultPlaybackRate属性)改变或播放速率(playbackRate属性)改变;

durationchange事件:媒介时长(duration属性)改变;

volumechange事件:音量(volume属性)改变或静音(muted属性)。


鲜花

握手

雷人

路过

鸡蛋

本文导航

相关阅读

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-9-25 08:39 , Processed in 0.079473 second(s), 27 queries .

返回顶部