HTML5-多媒体标签

多媒体标签

audio标签

概念:在页面中插入音频，不同的浏览器对音频格式的支持不一样

语法:

<audio src="音频文件路径" controls="controls" autoplay="autoplay" preload="auto|media|none" loop="loop">
    你的浏览器不支持audio标签，请升级到最新版本
</audio>

常用属性

• src ：音频文件的来源

• controls： 是否显示控制面板，默认不显示

• autoplay： 是否自动播放，默认不自动播放

• loop ：是否循环播放

• muted ：是否静音

• preload ：是否预加载

  • none：不预加载

  • auto： 默认值，预加载

  • metadata：只预加载元数据（即媒体字节数，第一帧，播放列表等)

实例

<audio src="../video/example.mp3" autoplay controls loop></audio>

运行结果

视频格式

对于HTML5音频格式中，主要有3种格式

• MP3

• WAV

• OGG

主流浏览器对音频的支持

格式	Chrome	Edge	Firefox	Safari	Opera
MP3	√	√	√	√	√
OGG	√	√	√		√
WAV	√	√	√	√	√

source元素

概念:如果想要音频在所有主流浏览器中成功播放，还得做兼容处理。

在HTML5中，可以使用source元素来实现多种格式的音频播放

语法:

<audio>
    <source="audio/MP3" src="文件路径" />
    <source="audio/ogg" src="文件路径" /&