9、HTML基础——多媒体元素

多媒体元素

video 视频

audio 音频

1. video元素

通常，视频资源的格式为.mp3和.webm

• controls：控制控件的显示，默认情况下视频不显示控件，需要点击鼠标右键点击显示控件。取值只能为controls。

下图即显示出来的控件，不加controls属性时，视频播放不显示控件。

某些属性，只有两种状态：1. 不写 2. 取值为属性名
这种属性叫做布尔属性
布尔属性，在HTML5中，可以不用书写属性值
例如controls属性，不写表示不显示控制控件，写的话controls="controls"可以简写为controls

• autoplay：布尔属性，自动播放。

• muted：布尔属性，静音播放。

• loop：布尔属性，循环播放。

2. audio

相关属性和video元素完全一致。

3. 兼容性

1. 旧版本的浏览器不支持这两个元素

2. 不同的浏览器支持的音视频格式可能不一致（mp4、webm）

解决方法：
原：

<audio src="./audio/01 放.mp3" controls muted autoplay loop></audio>

现：

<audio  controls muted autoplay loop> 
    <!-- 格式问题 -->
    <source src="./audio/01 放.mp3">
    <source src="./audio/01 放.webm">
    <!-- 版本问题 -->
    <p>
        对不起，您的浏览器不支持video元素，请点击这里下载最新版本的浏览器
    </p>
    <!-- 或嵌入flash -->
</audio>