HTML5 DOM 为 audio 和 video>元素提供了一系列的方法、属性和事件。这些方法、属性和事件允许使用 JavaScript 来操作 audio 和 video 元素。
音/视频 | ||||
---|---|---|---|---|
功能 | 名称 | 描述 | 备注 | 实例链接 |
音/视频 方法 | addTextTrack() | 创建和返回新的 TextTrack 对象 | 新的 TextTrack 对象会被添加到视频/音频(audio/video)元素的文本轨道列表中 所有主流浏览器都不支持 addTextTrack() 方法 |
实例链接 |
canPlayType() | 检测浏览器是否能播放指定的音频/视频类型 | 返回值:probably - 浏览器最可能支持该音频/视频类型 maybe - 浏览器也许支持该音频/视频类型 "" - (空字符串)浏览器不支持该音频/视频类型 |
实例链接 | |
load() | 重新加载音频/视频(audio/video)元素 | 用于在更改来源或其他设置后对音频/视频(audio/video)元素进行更新 | 实例链接 | |
play() | 开始播放当前的音频或视频 | - | 实例链接 | |
pause() | 停止(暂停)当前播放的音频或视频 | - | 实例链接 | |
音/视频 属性 | audioTracks | 返回 AudioTrackList 对象(AudioTrackList 对象表示音频/视频的可用音频轨道) | 所有主流浏览器都不支持 audioTracks 属性 | 实例链接 |
autoplay | 设置或返回音频/视频是否在加载后立即开始播放 | - | 实例链接 | |
buffered | 返回 TimeRanges 对象(TimeRanges 对象表示用户的音频/视频缓冲范围) | 缓冲范围指的是已缓冲音频/视频的时间范围 如果用户在音频/视频中跳跃播放,会得到多个缓冲范围 |
实例链接 | |
controller | 返回音频/视频的当前媒体控制器 | 音频/视频(audio/video)元素不会有媒体控制器 如果规定了媒体控制器,controller 属性将以 MediaController 对象的形式返回它 所有主流浏览器都不支持 controller 属性 |
实例链接 | |
controls | 设置或返回浏览器应当显示标准的音频/视频控件 | 播放/暂停/进度条/音量/全屏切换(供视频)/字幕(当可用时)/轨道(当可用时) | 实例链接 | |
crossOrigin | 设置或返回音频/视频的 CORS 设置 | - | - | |
currentSrc | 返回当前音频/视频的 URL | 如果未设置音频/视频,则返回空字符串 | 实例链接 | |
currentTime | 设置或返回音频/视频播放的当前位置(以秒计) | 当设置该属性时,播放会跳跃到指定的位置 | 实例链接 | |
defaultMuted | 设置或返回音频/视频是否默认静音 | 设置该属性仅改变默认的静音状态,而不是当前的 要改变当前的静音状态,请使用 muted 属性 |
实例链接 | |
defaultPlaybackRate | 设置或返回音频/视频的默认播放速度 | 设置该属性仅会改变默认的播放速度,而不是当前的 要改变当前的播放速度,请使用 playbackRate 属性 |
实例链接 | |
duration | 返回当前音频/视频的长度,以秒计 | 如果未设置音频/视频,则返回 NaN (Not-a-Number) | 实例链接 | |
ended | 返回音频/视频的播放是否已结束 | 如果播放位置位于音频/视频的结尾时,则音频/视频已结束 | 实例链接 | |
error | 返回一个 MediaError 对象 | MediaError 对象的 code 属性包含了音频/视频的错误状态 | 实例链接 | |
loop | 设置或返回音频/视频是否应该在结束时重新播放 | - | 实例链接 | |
mediaGroup | 设置或返回音频/视频所属的媒体组合的名称 | 媒体组合允许两个或更多音频/视频(audio/video)元素保持同步 | 实例链接 | |
muted | 设置或返回音频/视频是否静音 | - | 实例链接 | |
networkState | 返回音频/视频的当前网络状态(activity) | 实例链接 | ||
paused | 返回音频/视频是否已暂停 | - | 实例链接 | |
playbackRate | 设置或返回音频/视频的当前播放速度 | - | 实例链接 | |
playe | 返回 TimeRanges 对象(TimeRanges 对象表示用户已经播放或看到的音频/视频范围) | 已播范围指的是被播放音频/视频的时间范围 如果用户在音频/视频中跳跃,则会获得多个播放范围 |
实例链接 | |
preload | 设置或返回是否在页面加载后立即加载音频/视频 | 允许作者向浏览器提供有关他/她认为会带来最佳用户体验的暗示 该属性在某些情况下被忽略 |
实例链接 | |
readyState | 返回音频/视频的当前就绪状态 | 就绪状态指示音频/视频是否已准备好播放 | 实例链接 | |
seekable | 返回 TimeRanges 对象(TimeRanges 对象表示用户已经播放或看到的音频/视频范围) | 对于非流视频,通常可以寻址到视频中的任何位置,即使其尚未完成缓冲 | 实例链接 | |
seeking | 返回用户目前是否正在音频/视频中寻址 | 寻址中(Seeking)指的是用户在音频/视频中移动/跳跃到新的位置 | 实例链接 | |
src | 设置或返回音频/视频的当前来源 | - | 实例链接 | |
startDate | 返回 Date 对象,表示音频/视频的当前时间线偏移 | 用于获得经由因特网的精确的音频/视频流同步 所有主流浏览器都不支持 startDate 属性 |
实例链接 | |
textTracks | 返回 TextTrackList 对象(TextTrackList 对象表示音频/视频的可用文本轨道) | 每个可用的文本轨道是由 TextTrack 对象表示的 | 实例链接 | |
videoTracks | 返回 VideoTrackList 对象(VideoTrackList 对象表示视频的可用视频轨道) | 每个可用的视频轨道是由 VideoTrack 对象表示的 所有主流浏览器都不支持 videoTracks 属性 |
实例链接 | |
volume | 设置或返回音频/视频的当前音量 | - | 实例链接 | |
音/视频 事件 | abort | 在音频/视频(audio/video)终止加载时触发 | 该事件是在多媒体数据终止下载时触发,而不是发生错误时触发 | - |
canplay | 当浏览器能够开始播放指定的音频/视频时,会发生 canplay 事件 | 当音频/视频处于加载过程中时,会依次发生以下事件:loadstart / durationchange / loadedmetadata / loadeddata / progress / canplay / canplaythrough | 实例链接 | |
canplaythrough | 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时,会发生 canplaythrough 事件 | 当音频/视频处于加载过程中时,会依次发生以下事件:loadstart / durationchange / loadedmetadata / loadeddata / progress / canplay / canplaythrough | 实例链接 | |
durationchange | 当指定音频/视频的时长数据发生变化时,会发生 durationchange 事件 | 当音频/视频加载后,时长将由 "NaN" 变为音频/视频的实际时长 | 实例链接 | |
emptied | 当目前的播放列表为空时触发 | - | - | |
ended | 在音频/视频(audio/video)播放完成后触发 | 该事件通常用于提示播放完成的信息,例如 "谢谢收听", "谢谢观看" 等 | 实例链接 | |
error | 在音频/视频(audio/video)加载发生错误时触发 | 影响多媒体数据加载的事件有:abort / emptied / stalled / suspend | - | |
loadeddata | 当前帧的数据已加载,但没有足够的数据来播放指定音频/视频的下一帧时,会发生 loadeddata 事件 | 当音频/视频处于加载过程中时,会依次发生以下事件:loadstart / durationchange / loadedmetadata / loadeddata / progress / canplay / canplaythrough | 实例链接 | |
loadedmetadata | 当指定的音频/视频的元数据已加载时,会发生 loadedmetadata 事件 | 当音频/视频处于加载过程中时,会依次发生以下事件:loadstart / durationchange / loadedmetadata / loadeddata / progress / canplay / canplaythrough | 实例链接 | |
loadstart | 当浏览器开始寻找指定的音频/视频时,会发生 loadstart 事件 | 当音频/视频处于加载过程中时,会依次发生以下事件:loadstart / durationchange / loadedmetadata / loadeddata / progress / canplay / canplaythrough | 实例链接 | |
pause | 在音频/视频(audio/video)暂停时触发 | play 事件在音频/视频(audio/video)开始播放时触发(或取消暂停) | 实例链接 | |
play | 在音频/视频(audio/video)开始播放时触发 | pause 事件在音频/视频(audio/video) 暂停播放时触发 | 实例链接 | |
playing | 在音频/视频(audio/video)因缓冲而暂停或停止后已就绪时触发 | - | 实例链接 | |
progress | 当浏览器正在下载指定的音频/视频时,会发生 progress 事件 | 当音频/视频处于加载过程中时,会依次发生以下事件:loadstart / durationchange / loadedmetadata / loadeddata / progress / canplay / canplaythrough | 实例链接 | |
ratechange | 在音频/视频(audio/video)播放速度发生改变时触发(如用户切换到慢速或快速播放模式) | 该事件通过音频/视频(audio/video)的 playbackRate 属性调用,用于设置或返回音频/视频(audio/video)的播放速度 | 实例链接 | |
seeked | 在用户已移动/跳跃到音频/视频(audio/video)中的新位置时触发 | 使用 Audio/Video 对象的 currentTime 属性来获取视频的播放位置 seeked 事件的相反事件为 seeking 事件 |
实例链接 | |
seeking | 在用户开始移动/跳跃到新的音频/视频(audio/video)播放位置时触发 | 使用 Audio/Video 对象的 currentTime 属性获取播放位置 seeking 事件的相反事件为 seeked 事件 |
实例链接 | |
stalled | 在浏览器尝试获取媒体数据,但数据不可用时触发 | 影响媒体数据加载的事件有:abort / emptied / error / suspend | - | |
suspend | 在浏览器刻意不加载媒体数据时触发 | 该事件在媒体数据被阻止加载时触发。 可以是完成加载后触发,或者因为被暂停的原因 影响媒体数据加载的事件有:abort / emptied / error / suspend |
- | |
timeupdate | 在音频/视频(audio/video)的播放位置发生改变时触发 | 该事件可以在以下情况被调用: 播放音频/视频(audio/video) / 移动音频/视频(audio/video)播放位置 | 实例链接 | |
volumechange | 在音频/视频(audio/video)的音量发生改变时触发 | 使用 Audio/Video 对象的 volume 属性来设置或返回音频/视频(audio/video)的音量 | 实例链接 | |
waiting | 在视频由于需要缓冲下一帧而停止时触发 | 该事件可用于 audio 元素,但通常都用在视频中 | 实例链接 |