HTML5 视频和音频的 DOM 参考手册

HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件。

这些方法、属性和事件允许您使用 JavaScript 来操作 <audio> 和 <video> 元素。

HTML5 Audio/Video 方法

方法 描述
addTextTrack() 向音频/视频添加新的文本轨道
canPlayType() 检测浏览器是否能播放指定的音频/视频类型
load() 重新加载音频/视频元素
play() 开始播放音频/视频
pause() 暂停当前播放的音频/视频

HTML5 Audio/Video 属性

属性 描述
audioTracks 返回表示可用音轨的 AudioTrackList 对象
autoplay 设置或返回是否在加载完成后随即播放音频/视频
buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller 返回表示音频/视频当前媒体控制器的 MediaController 对象
controls 设置或返回音频/视频是否显示控件(比如播放/暂停等)
crossOrigin 设置或返回音频/视频的 CORS 设置
currentSrc 返回当前音频/视频的 URL
currentTime 设置或返回音频/视频中的当前播放位置(以秒计)
defaultMuted 设置或返回音频/视频默认是否静音
defaultPlaybackRate 设置或返回音频/视频的默认播放速度
duration 返回当前音频/视频的长度(以秒计)
ended 返回音频/视频的播放是否已结束
error 返回表示音频/视频错误状态的 MediaError 对象
loop 设置或返回音频/视频是否应在结束时重新播放
mediaGroup 设置或返回音频/视频所属的组合(用于连接多个音频/视频元素)
muted 设置或返回音频/视频是否静音
networkState 返回音频/视频的当前网络状态
paused 设置或返回音频/视频是否暂停
playbackRate 设置或返回音频/视频播放的速度
played 返回表示音频/视频已播放部分的 TimeRanges 对象
preload 设置或返回音频/视频是否应该在页面加载后进行加载
readyState 返回音频/视频当前的就绪状态
seekable 返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking 返回用户是否正在音频/视频中进行查找
src 设置或返回音频/视频元素的当前来源
startDate 返回表示当前时间偏移的 Date 对象
textTracks 返回表示可用文本轨道的 TextTrackList 对象
videoTracks 返回表示可用视频轨道的 VideoTrackList 对象
volume 设置或返回音频/视频的音量

HTML5 Audio/Video 事件

事件 描述
abort 当音频/视频的加载已放弃时
canplay 当浏览器可以播放音频/视频时
canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange 当音频/视频的时长已更改时
emptied 当目前的播放列表为空时
ended 当目前的播放列表已结束时
error 当在音频/视频加载期间发生错误时
loadeddata 当浏览器已加载音频/视频的当前帧时
loadedmetadata 当浏览器已加载音频/视频的元数据时
loadstart 当浏览器开始查找音频/视频时
pause 当音频/视频已暂停时
play 当音频/视频已开始或不再暂停时
playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
progress 当浏览器正在下载音频/视频时
ratechange 当音频/视频的播放速度已更改时
seeked 当用户已移动/跳跃到音频/视频中的新位置时
seeking 当用户开始移动/跳跃到音频/视频中的新位置时
stalled 当浏览器尝试获取媒体数据,但数据不可用时
suspend 当浏览器刻意不获取媒体数据时
timeupdate 当目前的播放位置已更改时
volumechange 当音量已更改时
waiting 当视频由于需要缓冲下一帧而停止

测试开发之前端——No9.HTML5中的视频/音频的更多相关文章

  1. 测试开发之前端——No2.HTML5中的标签

    HTML5中的标签. 标签 描述 <!--...--> 定义注释. <!DOCTYPE>  定义文档类型. <a> 定义超链接. <abbr> 定义缩写 ...

  2. 测试开发之前端——No4.HTML5中的事件属性

    HTML5的事件属性. 属性 值 描述 onafterprint script 在打印文档之后运行脚本 onbeforeprint script 在文档打印之前运行脚本 onbeforeonload ...

  3. 测试开发之前端——No3.HTML5中的标准属性

    HTML5的标准属性 属性 值 描述 accesskey character 规定访问元素的键盘快捷键 class classname 规定元素的类名(用于规定样式表中的类). contentedit ...

  4. 测试开发之前端——No8.HTML5中的媒介事件

    媒介事件 由视频.图像以及音频等媒介触发的事件. 适用于所有 HTML 5 元素,不过在媒介元素(诸如 audio.embed.img.object 以及 video)中最常用: 属性 值 描述 on ...

  5. 测试开发之前端——No5.HTML5中的表单事件

    表单事件 由 HTML 表单内部的动作触发的事件. 适用于所有 HTML 5 元素,不过最常用于表单元素中: 属性 值 描述 onblur script 当元素失去焦点时运行脚本 onchange s ...

  6. 测试开发之前端——No7.HTML5中的鼠标事件

    鼠标事件 由鼠标或相似的用户动作触发的事件. 适用于所有 HTML 5 元素: 属性 值 描述 onclick script 当单击鼠标时运行脚本 ondblclick script 当双击鼠标时运行 ...

  7. 测试开发之前端——No6.HTML5中的键盘事件

    键盘事件 由键盘触发的事件. 适用于所有 HTML 5 元素: 属性 值 描述 onkeydown script 当按下按键时运行脚本 onkeypress script 当按下并松开按键时运行脚本 ...

  8. html5-8 如何控制html5中的视频标签和音频标签

    html5-8 如何控制html5中的视频标签和音频标签 一.总结 一句话总结:找到视频或者音频的element对象,然后查手册看对应的方法或者属性就可以,里面有控制的. 1.如何控制html5中的视 ...

  9. 直播软件开发关于Android、iOS中的视频采集步骤

    很多人对直播软件开发还是抱有想法的,但是在这个资本冷静的市场下,直播平台该怎么玩,在直播软件开发过程中哪些功能是必须具备的,这都是值得关注的话题.今天我们给大家分享一份详细的直播软件开发关于Andro ...

随机推荐

  1. laravel 模型事件 updated 触发条件

    1. 只有 $sku->{attribute} != $sku->getOriginal({attribute}) 不一致的时候才会触发 getDirty() 不为空的时候才触发, 而且不 ...

  2. django在读取数据库时未筛选到符合条件的记录会报错

    (1)报错情况如下: DoesNotExist: Publisher matching query does not exist.   (2)处理方法: try:    p = Publisher.o ...

  3. curl命令的基本使用

    curl命令的基本使用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. curl是基于URL语法在命令行方式下工作的文件传输工具,它支持FTP,FTPS,HTTP,HTTPS,GOP ...

  4. Git与GitHub的基本使用

    Git与GitHub的基本使用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Git的基本使用 1.版本库创建 a>.什么是版本库呢 版本库又名仓库,英文名reposit ...

  5. 原生js轮播图实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Dapper总结(二)---事务和存储过程

    一  dapper使用事务 string sql1 = "insert into UserInfo values('user8',27,'s')"; string sql2 = & ...

  7. Multi-Anti-Nim游戏结论及证明

    一.定义 Anti-Nim 游戏: 取走最后一个石子的玩家输 Multi-Nim游戏: 每次取完后可以将一堆石子分为多堆,不能存在空堆 Multi-Anti-Nim游戏: 每次取完后可以将一堆石子分为 ...

  8. indexOf与includes的比较

    indexOf和includes都代表检测数组或字符串中是否包含某一个元素 其中indexOf返回的是数值类型,而includes返回的是布尔类型 var ary = [,,]; console.lo ...

  9. C++ STL sort()函数用法

    C++STL提供的在里的排序函数,有以下两种形式 此外还提供有稳定排序版本stable_sort(),用法类似. 第一种形式: template <class RandomAccessItera ...

  10. Element link doesn't have required attribute property

    前端标准http://validator.w3.org/ 拒绝你的代码时报 Element link doesn't have required attribute property 把样式链接 &l ...