HTML5 音频 / 视频 DOM 操作

清疚 2022-05-09 13:40 275阅读 0赞

HTML5 Audio/Video 方法

HTML5 Audio/Video 属性

HTML5 Audio/Video 事件

--------------------

# HTML5 音频 / 视频 DOM 操作 #

1、HTML5 DOM 为 <audio> 和 <video> 元素提供了操作的方法、属性和事件，关于 <[audio> ][audio_]和 [<video>][video] 标签本文不再累述

2、HTML 5 DOM 提供的这些方法、属性和事件可以方便的在 JavaScript 中来操作 <[audio> ][audio_]和 [<video>][video] 元素，比如控制播放，暂停等。

# HTML5 Audio/Video 方法 #

<table> 
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_met_addtexttrack.asp" rel="nofollow">addTextTrack()</a></td> 
   <td>向音频/视频添加新的文本轨道</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_met_canplaytype.asp" rel="nofollow">canPlayType()</a></td> 
   <td>检测浏览器是否能播放指定的音频/视频类型</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_met_load.asp" rel="nofollow">load()</a></td> 
   <td>重新加载音频/视频元素</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_met_play.asp" rel="nofollow">play()</a></td> 
   <td>开始播放音频/视频</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_met_pause.asp" rel="nofollow">pause()</a></td> 
   <td>暂停当前播放的音频/视频</td> 
  </tr> 
 </tbody> 
</table>

# HTML5 Audio/Video 属性 #

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_audiotracks.asp" rel="nofollow">audioTracks</a></td> 
   <td>返回表示可用音轨的 AudioTrackList 对象</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_autoplay.asp" rel="nofollow">autoplay</a></td> 
   <td>设置或返回是否在加载完成后随即播放音频/视频</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_buffered.asp" rel="nofollow">buffered</a></td> 
   <td>返回表示音频/视频已缓冲部分的 TimeRanges 对象</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_controller.asp" rel="nofollow">controller</a></td> 
   <td>返回表示音频/视频当前媒体控制器的 MediaController 对象</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_controls.asp" rel="nofollow">controls</a></td> 
   <td>设置或返回音频/视频是否显示控件（比如播放/暂停等）</td> 
  </tr> 
  <tr> 
   <td>crossOrigin</td> 
   <td>设置或返回音频/视频的 CORS 设置</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_currentsrc.asp" rel="nofollow">currentSrc</a></td> 
   <td>返回当前音频/视频的 URL</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_currenttime.asp" rel="nofollow">currentTime</a></td> 
   <td>设置或返回音频/视频中的当前播放位置（以秒计）</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_defaultmuted.asp" rel="nofollow">defaultMuted</a></td> 
   <td>设置或返回音频/视频默认是否静音</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_defaultplaybackrate.asp" rel="nofollow">defaultPlaybackRate</a></td> 
   <td>设置或返回音频/视频的默认播放速度</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_duration.asp" rel="nofollow">duration</a></td> 
   <td>返回当前音频/视频的长度（以秒计）</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_ended.asp" rel="nofollow">ended</a></td> 
   <td>返回音频/视频的播放是否已结束</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_error.asp" rel="nofollow">error</a></td> 
   <td>返回表示音频/视频错误状态的 MediaError 对象</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_loop.asp" rel="nofollow">loop</a></td> 
   <td>设置或返回音频/视频是否应在结束时重新播放</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_mediagroup.asp" rel="nofollow">mediaGroup</a></td> 
   <td>设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_muted.asp" rel="nofollow">muted</a></td> 
   <td>设置或返回音频/视频是否静音</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_networkstate.asp" rel="nofollow">networkState</a></td> 
   <td>返回音频/视频的当前网络状态</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_paused.asp" rel="nofollow">paused</a></td> 
   <td>设置或返回音频/视频是否暂停</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_playbackrate.asp" rel="nofollow">playbackRate</a></td> 
   <td>设置或返回音频/视频播放的速度</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_played.asp" rel="nofollow">played</a></td> 
   <td>返回表示音频/视频已播放部分的 TimeRanges 对象</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_preload.asp" rel="nofollow">preload</a></td> 
   <td>设置或返回音频/视频是否应该在页面加载后进行加载</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_readystate.asp" rel="nofollow">readyState</a></td> 
   <td>返回音频/视频当前的就绪状态</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_seekable.asp" rel="nofollow">seekable</a></td> 
   <td>返回表示音频/视频可寻址部分的 TimeRanges 对象</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_seeking.asp" rel="nofollow">seeking</a></td> 
   <td>返回用户是否正在音频/视频中进行查找</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_src.asp" rel="nofollow">src</a></td> 
   <td>设置或返回音频/视频元素的当前来源</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_startdate.asp" rel="nofollow">startDate</a></td> 
   <td>返回表示当前时间偏移的 Date 对象</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_texttracks.asp" rel="nofollow">textTracks</a></td> 
   <td>返回表示可用文本轨道的 TextTrackList 对象</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_videotracks.asp" rel="nofollow">videoTracks</a></td> 
   <td>返回表示可用视频轨道的 VideoTrackList 对象</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_prop_volume.asp" rel="nofollow">volume</a></td> 
   <td>设置或返回音频/视频的音量</td> 
  </tr> 
 </tbody> 
</table>

# HTML5 Audio/Video 事件 #

<table> 
 <tbody> 
  <tr> 
   <th>事件</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>abort</td> 
   <td>当音频/视频的加载已放弃时</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_event_canplay.asp" rel="nofollow">canplay</a></td> 
   <td>当浏览器可以播放音频/视频时</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_event_canplaythrough.asp" rel="nofollow">canplaythrough</a></td> 
   <td>当浏览器可在不因缓冲而停顿的情况下进行播放时</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_event_durationchange.asp" rel="nofollow">durationchange</a></td> 
   <td>当音频/视频的时长已更改时</td> 
  </tr> 
  <tr> 
   <td>emptied</td> 
   <td>当目前的播放列表为空时</td> 
  </tr> 
  <tr> 
   <td>ended</td> 
   <td>当目前的播放列表已结束时</td> 
  </tr> 
  <tr> 
   <td>error</td> 
   <td>当在音频/视频加载期间发生错误时</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_event_loadeddata.asp" rel="nofollow">loadeddata</a></td> 
   <td>当浏览器已加载音频/视频的当前帧时</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_event_loadedmetadata.asp" rel="nofollow">loadedmetadata</a></td> 
   <td>当浏览器已加载音频/视频的元数据时</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_event_loadstart.asp" rel="nofollow">loadstart</a></td> 
   <td>当浏览器开始查找音频/视频时</td> 
  </tr> 
  <tr> 
   <td>pause</td> 
   <td>当音频/视频已暂停时</td> 
  </tr> 
  <tr> 
   <td>play</td> 
   <td>当音频/视频已开始或不再暂停时</td> 
  </tr> 
  <tr> 
   <td>playing</td> 
   <td>当音频/视频在已因缓冲而暂停或停止后已就绪时</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/av_event_progress.asp" rel="nofollow">progress</a></td> 
   <td>当浏览器正在下载音频/视频时</td> 
  </tr> 
  <tr> 
   <td>ratechange</td> 
   <td>当音频/视频的播放速度已更改时</td> 
  </tr> 
  <tr> 
   <td>seeked</td> 
   <td>当用户已移动/跳跃到音频/视频中的新位置时</td> 
  </tr> 
  <tr> 
   <td>seeking</td> 
   <td>当用户开始移动/跳跃到音频/视频中的新位置时</td> 
  </tr> 
  <tr> 
   <td>stalled</td> 
   <td>当浏览器尝试获取媒体数据，但数据不可用时</td> 
  </tr> 
  <tr> 
   <td>suspend</td> 
   <td>当浏览器刻意不获取媒体数据时</td> 
  </tr> 
  <tr> 
   <td>timeupdate</td> 
   <td>当目前的播放位置已更改时</td> 
  </tr> 
  <tr> 
   <td>volumechange</td> 
   <td>当音量已更改时</td> 
  </tr> 
  <tr> 
   <td>waiting</td> 
   <td>当视频由于需要缓冲下一帧而停止</td> 
  </tr> 
 </tbody> 
</table>

[audio_]: http://www.w3school.com.cn/tags/tag_audio.asp
[video]: http://www.w3school.com.cn/tags/tag_video.asp