HTML5中audio与video

文章转自小康博客，供个人📚学习记录。
文章链接: https://www.antmoe.com/posts/b4f006e7/

音频

HTML5 中提供的音频 API 标签为 <audio></audio>，使用示例如：

1
<audio src="野狼disco.m4a" controls></audio>

兼容写法

1
2
3
4
5
6
7
<audio controls>
    <source src="resource/audio/OUTPUT.mp3" type='audio/mpeg'>
    <source src="resource/audio/OUTPUT.aac" type='audio/aac; codecs="aac"'>
    <source src="resource/audio/OUTPUT.ogg" type='audio/ogg; codecs="vorbis"'>

    您的浏览器不支持，<a href="resource/audio/OUTPUT.mp3">请下载</a>
</audio>

当浏览器不支持或者当前音乐地址失效时会分别访问 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 播放