HTML5中audio与video
音频
HTML5中提供的音频API标签为<audio></audio>
,使用示例如:
1 | <audio src="野狼disco.m4a" controls></audio> |
兼容写法
1 | <audio controls> |
当浏览器不支持或者当前音乐地址失效时会分别访问source
提供的路径,如果全部失效则提示最下边的文本。
音乐属性
属性名 | 说明 |
---|---|
controls | 显示控件 |
autoplay | 自动播放 |
loop | 循环播放 |
preload | 预加载 |
muted | 静音 |
视频
HTML5中提供的音频API标签为<video></video>
,使用示例如:
1 | <video src="不能说的秘密.mp4" controls></video> |
兼容写法与音乐相同
视频属性
属性名 | 说明 |
---|---|
controls | 显示控件 |
autoplay | 自动播放 |
loop | 循环播放 |
muted | 静音 |
poster | 预览图片设置 |
preload | 预加载none :不预先加载任何数据metadata :只预先加载元数据 (视频总时长,第一帧画面图形等)auto :预先加载视频 |
音视频事件
事件名 | 说明 |
---|---|
onloadedmetadata | 当音频元数据加载完毕时触发,作用在于获取音视频文件的总时长 |
ontimeupdate | 当音频播放时间变化时触发 |
onvolumechange | 当声音改变时触发 |
音视频对象属性
可读可写属性
属性名 | 说明 |
---|---|
currentTime | 音频已经播放时长(返回未格式化的秒) |
volume | 控制音量。值为0 ~ 1的任意值。 |
muted | 布尔值。静音。(ture表示静音,false表示非静音) |
playbackRate | 播放速率 |
只读属性
属性名 | 说明 |
---|---|
duration | 音频总时长(返回未格式化的秒) |
paused | 布尔值。音频文件是否暂停。(ture表示暂停,false表示播放) |
ended | 布尔值。音频文件播放结束(ture表示播放结束,false表示播放中或者暂停) |
音视频对象方法
方法名 | 说明 |
---|---|
pause | 暂停 |
play | 播放 |
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小康博客!
评论
TwikooWaline