H5新特性一音视频标签
目录
H5新特性（一）——音视频标签
H5新特性——音视频标签
大家都有在网页中浏览音频和视频的经历，在
HTML5
之前，对视频和音频没有一个标准，因此在网页中看到的视频，都是通过第三插件的方式嵌入的，可能是
QuickTime
，也可能是
RealPlayer
或者
Flash
。但并不是所有的浏览器都拥有相同的插件，为了能让视频和音频在网页内播放成功，
HTML5
规定了一种通过video，audio来包含视频播放的标准。
1.音频
HTML5
提供了audio标签, 实现网页中音频的播放:
简写方式:
<audio src="音频路径" controls></audio>标准方式:
<audio controls>
<source src="xxx.mp3" type="audio/mpeg"/>
<source src="xxx.ogg" type="audio/ogg"/>
<source src="xxx.wav" type="audio/wav"/>
</audio>常用属性:
<audio src="音频路径"
controls 是否显示音乐播放面板
autoplay 是否自动播放
loop 是否单曲循环
muted 是否默认静音
preload="auto | metadata | none" 音频的预加载模式
>
</audio>preload=none 不进行音频预加载
preload=metadata 仅加载音频的基本信息
preload=auto 尽可能加载音频信息
2.视频标签
video标签用于在网页中播放视频(支持:mp4/ogg/webm):
<video src="视频路径" controls></video>常用属性:
<video src="视频路径"
controls 是否显示音乐播放面板
autoplay 是否自动播放
loop 是否单曲循环
muted 是否默认静音
preload="auto | metadata | none" 音频的预加载模式
width=""
height=""
poster="./assets/logo.jpg" 视频海报帧
>
</video>3.音视频的 DOM 操作
<audio id="au" src="" ....></audio>let au = document.getElementById('au')
au.play()Audio以及Video对象的常用方法
| 方法 | 描述 |
|---|---|
| 开始播放音频/视频 | |
| 暂停当前播放的音频/视频 |
Audio以及Video对象的常用属性
| 属性 | 描述 |
|---|---|
| 设置或返回是否在加载完成后随即播放音频/视频 | |
| 设置或返回音频/视频是否显示控件（比如播放/暂停等） | |
| 返回当前音频/视频的 URL | |
| 设置或返回音频/视频中的当前播放位置（以秒计） | |
| 返回当前音频/视频的长度（以秒计） | |
| 返回音频/视频的播放是否已结束 | |
| 返回表示音频/视频错误状态的 MediaError 对象 | |
| 设置或返回音频/视频是否应在结束时重新播放 | |
| 设置或返回音频/视频是否静音 | |
| 返回音频/视频的当前网络状态 | |
| 设置或返回音频/视频是否暂停 | |
| 设置或返回音频/视频播放的速度 | |
| 设置或返回音频/视频是否应该在页面加载后进行加载 | |
| 设置或返回音频/视频的音量 |
Audio以及Video对象的常用事件
// 更新播放进度信息
player.addEventListener("waiting", function () {
})| 事件 | 描述 |
|---|---|
| abort | 当音频/视频的加载已放弃时 |
| 当浏览器已加载音频/视频的元数据时 | |
| pause | 当音频/视频已暂停时 |
| play | 当音频/视频已开始或不再暂停时 |
| timeupdate | 当目前的播放位置已更改时 |
| volumechange | 当音量已更改时 |
| waiting | 当视频由于需要缓冲下一帧而停止 |