HTML Audio&Video

audio video 所具有的属性大致相同

1> src

2> autoplay (boolean)

3> preload

none:不预加载

metadata:只加载媒体的原数据(媒体字节数,第一帧,播放列表.持续时间等)

auto:预加载

4> poster(video) 当视频不可用时,展示代替的图片

5> loop (boolean)

6> controls

7> width ,height

8> error

switch (video.error.code)

{

case MediaError.MEDIA_ERROR_ABORTED:

alert("视频的下载过程被中止。");

break;

case MediaError.MEDIA_ERROR_NETWORK:

alert("网络发生故障,视频的下载过程被中止。");

break;

case MediaError.MEDIA_ERROR_DECODE:

alert("解码失败。");

break;

case MediaError.MEDIA_ERROR_SRC_NOT_SUPPORTED:

alert("不支持播放的视频格式。");

break;

default:

alert("发生未知错误。");

}

9> networkState

多媒体元素<video>的networkState属性可以返回视频文件的网络状态,当浏览器读取视频文件时,将触发一个“progress”事件,通过该事件,可以获取视频文件在被打开过程中,各个不同阶段的网络状态值,networkState属性为只读属性,该属性对应4个返回值如下表所示。

字符常量 返回值 说明

NETWORK_EMPTY 0 数据加载初始化

NETWORK_IDLE 1 文件加载成功,等待请求播放

NETWORK_LOADING 2 文件正在在加载过程中

NETWORK_NO_SOURCE 3 加载出错,没有找到支持的编码格式

10 >currentSrc 播放中的媒体数据的URL地址(readonly)

11 >buffered

buffered 属性返回 TimeRanges 对象。TimeRanges 对象表示用户的音视频缓冲范围。缓冲范围指的是已缓冲音视频的时间范围。如果用户在音视频中跳跃播放,会得到多个缓冲范围。

TimeRanges 对象 , 表示音视频的已缓冲部分。

TimeRanges 对象属性:

-> length - 获得音视频中已缓冲范围的数量

-> start(index) - 获得某个已缓冲范围的开始位置

-> end(index) - 获得某个已缓冲范围的结束位置(首个缓冲范围的下表是 0)。

语法:

myVvideo1");

alert("Start: " + myVid.buffered.start(0) + " End: " + myVid.buffered.end(0));

12 >readyState (readonly)

readyState 属性返回音频/视频的当前就绪状态。 就绪状态指示音频/视频是否已准备好播放。

0 = HAVE_NOTHING - 没有关于音频/视频是否就绪的信息

1 = HAVE_METADATA - 关于音频/视频就绪的元数据

2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的,但没有足够的数据来播放下一帧/毫秒

3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的

4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放

语法 audio|video.readyState

13 >seeking 与 seekable (readonly)

seeking 属性返回用户目前是否在音频/视频中寻址。 寻址中(Seeking)指的是用户在音频/视频中移动/跳跃到新的位置。

true|false。如果用户正在寻址,则为 true。否则为 false。

seekable 属性返回 TimeRanges 对象。 TimeRanges 对象表示音频/视频中用户可寻址的范围。 可寻址范围指的是用户在音频/视频中可寻址(移动播放位置)的时间范围。 对于流视频,通常可以寻址到视频中的任何位置,即使其尚未完成缓冲。 表示音频/视频中的可寻址部分。

TimeRanges 对象的属性:

length - 获得音频/视频中可寻址范围的数量

start(index) - 获得可寻址范围的开始位置

end(index) - 获得可寻址范围的结束位置 (第一个可寻址范围的下标是 index 0)。

14 >currentTime (r & w), startTime (r), duration (r)

currentTime 属性设置或返回音频/视频播放的当前位置(以秒计)。当设置该属性时,播放会跳跃到指定的位置

如果修改的位置上没有可用的媒体数据时,会抛出INVALID_STATE_ERR,如果修改的位置超出了浏览器在一次请求中可以请求的数据范围,会抛出INDEX_SIZE_ERR

startTime 读取媒体播放的开始时间

duration 读取媒体播放的总时间

15 >played , paused , end (all readonly)

played 属性返回 TimeRanges 对象。 TimeRanges 对象表示用户已经播放或看到的音频/视频范围。 已播范围指的是被播放音频/视频的时间范围。如果用户在音频/视频中跳跃,则会获得多个播放范围。

表示音频/视频的已播范围。

TimeRanges 对象的属性:

length - 获得音频/视频中已播范围的数量

start(index) - 获得某个已播范围的开始位置

end(index) - 获得某个已播范围的结束位置(首段已播范围的下标是 0)。

paused 返回布尔值 ,表示当前播放状态是 播放还是停止.

end 返回布尔值,表示播放是否结束

16 >defaultPlaybackRate 与 playbackRate

defaultPlaybackRate 属性设置或返回音频/视频的默认播放速度。

设置该属性仅会改变默认的播放速度,而不是当前的。要改变当前的播放速度,请使用 playbackRate 属性。

只有 Google Chrome 支持 defaultPlaybackRate 属性。

指示音频/视频的默认播放速度。

例值:

1.0 正常速度

0.5 半速(更慢)

2.0 倍速(更快)

-1.0 向后,正常速度

-0.5 向后,半速

17 >volumn muted

volumn 用来设置或读取媒体音量 0(静音) ~ 1(最大音量)

muted 用来设置或读取媒体静音状态 true (静音) ,false (非静音)

audio, video 方法

1 >play 自动将 paused 改为 false

2 >paused 自动将 paused 改为 true

3 >load 重新载入媒体播放,自动把playbackRate 变为 defaultPlaybackRate

4 >canplayType

canPlayType() 方法浏览器是否能播放指定的音频/视频类型。

canPlayType() 方法可返回下列值之一:

"probably" - 浏览器最可能支持该音频/视频类型

"maybe" - 浏览器也许支持该音频/视频类型

"" - (空字符串)浏览器不支持该音频/视频类型

规定要检测的音频/视频类型。 常用值:

video/ogg

video/mp4

video/webm

audio/mpeg

audio/ogg

audio/mp4

常用值,包括编解码器:

video/ogg; codecs="theora, vorbis"

video/mp4; codecs="avc1.4D401E, mp4a.40.2"

video/webm; codecs="vp8.0, vorbis"

audio/ogg; codecs="vorbis"

audio/mp4; codecs="mp4a.40.5"

注释:如果包含编解码器,则只能返回 "probably"。

audio, video 事件

在利用video元素或audio元素读取或播放媒体数据的时候,会触发一系列的事件,如果用Javascript脚本来捕捉这些事件,就可以对这些事件进行处理了。对于这些事件的捕捉及其处理,可以按两种方式进行。

->1监听的方式,使用video元素或audio元素的addEventListener方法来对事件的发生进行监听,该方法的定义如下所示。

videoElement.addEventListener(type,listener,useCapture);

videoElement表示页面上的video元素或audio元素。type为事件名称,listener表示绑定的函数,

useCapture是一个布尔值,表示该事件的响应顺序,该值如果为true,则浏览器采用capture响应方式,如果为false,浏览器采用bubbing响应方式,一般采用false,默认情况下也为false。

->2JavaScript脚本中常见的获取事件句柄的方式,

如下例: <video id=”video1″ width=”320″ height=”240″ src=”sample.move” onplay=”begin_playing();”></video> function begin_playing(){….//略};

下面是浏览器在请求媒体数据、下载媒体数据、播放媒体数据一直到播放结束这一系列过程中的事件。

事件 描述

loadstart 浏览器开始在网上寻找数据

progress 浏览器正在获取媒体数据

suspend 浏览器暂停获取媒体数据,但是下载过程并没有正常结束

abort 浏览器在下载完全部媒体数据之前中止获取媒体数据,但是并不是错误引起的

error 获取媒体数据过程中出错

emptied video元素或audio元素所在网络突然变为未初始化状态(可能引起的原因有两个: 1.载入媒体过程中突然发生一个致命错误 2.在浏览器正在选择支持的播放格式时,又调用了Load方法重新载入媒体)

stalled 浏览器尝试获取媒体数据失败

play 即将开始播放,当执行力play方法时触发,或数据下载后元素被设为autoplay(自动播放)属性

pause 播放暂停,当执行了pause方法时触发

loadedmetadata 浏览器获取完毕媒体的时间长和字节数

loadeddata 浏览器已加载完毕当前播放位置的媒体数据,准备播放

waiting 播放过程由于得不到下一帧而暂停播放(例如下一帧尚未加载完毕),但很快就能够得到下一帧

playing 正在播放

canplay 浏览器能够播放媒体,但估计以当前播放速率不能直接将媒体播放完毕,播放期间需要缓冲

canplaythrough 浏览器能够播放媒体,而且以当前播放速率能够将媒体播放完毕,不再需要缓冲

seeking seeking属性变为true,浏览器正在请求数据

seeked seeking属性变为false,浏览器停止请求数据

timeupdate 当前播放位置被改变,可能是播放过程中的自然改变,也可能是人为地改变,或由于播放不能连续而发生的跳变

ended 播放结束后停止播放

ratechange defaultplaybackRate(默认播放速率)或playbackRate属性(当前播放速率)被改变

durationchange 播放时长被改变

volumechange volume属性(音量)被改变或muted属性(静音状态)被改变