HTML5多媒体新增特性

截止至今,多媒体内容在大多数情况下都是通过第三方插件或者集成在web浏览器上的应用程序放到网页上的。此类插件包括realplayer、silverlight和quicktime等。目前最流行的方法是通过adobe的Flashplayer插件将视频和音频嵌入到网页中。

在HTML4之前的版本中多媒体元素所用的代码复杂冗长而且需要第三方插件,HTML5中引入的vedio和audio元素解决了这个问题。HTML5的用户不需要下载第三方插件来观看网页中的多媒体元素,并且视频和音频播放器更容易通过脚本访问。

虽然HTML5多媒体支持在理论上是非常优秀的,但是实际操作中并没有那么简单。需要考虑多媒体新元素、浏览器以及视频音频的解码等众多元素。

HTML5中创建视频

vedio元素的属性

HTML5规定了一中通过vedio元素来包含视频的标准方法,其中不同的属性表示视频的不同播放特性

vedio属性如下:

autoplay:当前网页完成载入后自动播放

controls:向用户显示控件,比如播放按钮、停止按钮等

loop:视频结束时重新开始播放

perload:是否在页面加载完成后载入视频,如果使用了autoplay,则忽略该属性none、metadate和auto,默认值为auto

src:所播放视频的URL地址

buffered:返回一个实现TimeRanges接口的对象,以确定浏览器是否已缓冲媒体数据

currentTime:返回媒体文件的当前播放时I安,也可以修改该时间属性

startTime:返回多媒体开始播放的时间

duration:返回多媒体元素总体播放时间

played:获得多媒体文件以播放完成的时间段

paused:返回当前播放的文件是否处于暂停状态

ended:放回当前播放文件是否结束

playbackRate:返回当前正播放的媒体文件的速度频率

volume:媒体元素播放音量

muted:是否设置为静音

height:设置视频播放器的高度

width:设置视频播放器的宽度

poster:用于指定一张图片,该图片在当前视频数据无效时显示,视频数据无效可能是视频正在加载,也可能是视频地址错误

networkState:返回视频文件的网络状态

readyState:返回媒体当前播放位置的就绪状态

error:只读属性。在多媒体元素加载或读取文件过程中,如果出现错误,将触发无元素的error事件。通过元素的error属性返回当前的错误值

defaultPlaybackRate:返回页面媒体元素默认的文件播放速度频率,即默认播放速率。一般情况下该属性值是1

vedio元素的方法

HTML5中vedio元素常用方法有三个,方法具体说明如下:

paly():播放视频,会将paused的值强行设为false

pause():暂停视频,会将paused的值强行设为true

load():重新载入视频,会将playbackRate的值强行设为defaultPlayBackRate的值,并且将error的值设为null

vedio元素的事件

媒介事件是指视频、图像以及音频等媒介触发的事件,适用于所有HTML5元素。不过在没接元素audio、embed、img、images和vedio最为常用

vedio元素常用事件如下:

loadstart:浏览器开始请求媒介媒介时运行运行脚本

progress:浏览器正在获取媒介数据时运行脚本

suspend:浏览器已经获取媒介数据,但在去取回整个媒介文件之前停止时运行脚本

about:浏览器发生中止事件时运行脚本

error:获取媒介出错,有错误发生时,才发送这个事件。另外还有一个error属性

emptied:媒介资源元素突然为空时(网络错误、加载错误等)运行脚本

stalled:浏览器获取媒介数据过程中(延迟0)存在时运行脚本

play:媒介数据即将开始播放时运行脚本

pause:媒介数据暂停播放时运行脚本

loadeddate:加载当前播放位置的媒体数据时运行脚本

loadedmetadata:加载完成媒体元素时,发送此事件,它将包括尺寸、时长和文件轨道等

playing:表明媒体已经开始播放

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

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

seeking:当搜索操作开始时发送此事件(seeking属性值为true)

seeked:当浏览器停止请求数据、搜索操作完成时,引发该事件(seeked属性值为false)

timeupdate:当媒介改变其播放位置时运行脚本

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

HTML5中创建音频

audio元素的属性

HTML5元素中的audio元素能够控制播放声音文件或音频流。audio元素的属性与vedio元素相比少了三个元素,它们分别是poster、height和width

audio元素的事件

audio元素的事件和vedio元素的事件是一样的