HTML5 audio标签
HTML5 audio标签在HTML5标准网页里面,我们可以运用audio标签来完成我们对声音的调用及播放,比如音乐或其他音频流。
HTML5 Audio标签支持三种格式的音频,分别是wav mp3和ogg格式。
一、Video标签支持的部分属性列举
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上自动播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放、暂停、定位、音量、全屏切换、字幕(如果可用)、音轨(如果可用)。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始循环播放。 |
preload | auto、meta、none |
如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的音频的 URL。可以是相对的URL也可以是绝对的URL,还可以用source标签来指定播放源。 |
二、Video标签实例
<!DOCTYPE HTML>
<html>
<body>
<audio controls="controls" autoplay="autoplay">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
你的浏览器不支持html5的audio标签
</audio>
</body>
</html>
实例说明
1、<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的。
2、audio 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
三、Video标签常用的事件
事件名称 | 事件作用 |
loadstart | 客户端开始请求数据 |
progress | 客户端正在请求数据(或者说正在缓冲) |
play | play()和autoplay播放时 |
pause | pause()方法促发时 |
ended | 当前播放结束 |
timeupdate | 当前播放时间发生改变的时候。播放中常用的时间处理哦 |
canplaythrough | 歌曲已经载入完全完成 |
canplay | 缓冲至目前可播放状态。 |