多媒体元素 video audio 兼容性 controls muted loop

多媒体元素

video视频
audio音频

video

• controls：视频的播放控件，取值只能为controls
• 取值为属性名，这种属性叫做布尔属性
• 布尔属性，在HTML5中，可以不用书写属性值

某些属性，只有两种状态:

1. 不写:

  <video  controls  src="./xin/img/现代占星中阶1.mp4" style="width: 600px;"></video>

2. 写属性值：

 <video  controls="controls"  src="./xin/img/现代占星中阶1.mp4" style="width: 600px;"></video>

• muted: 布尔属性，静音播放。
• loop: 布尔属性，循环播放

   <video muted loop controls="controls"  src="./xin/img/现代占星中阶1.mp4" style="width: 600px;"></video>

audio

用法同上

兼容性

1．旧版本的浏览器不支持这两个元素
2．不同的浏览器支持的音视频格式可能不一致

有些支持MP4 有些支持webm
因此同时设置两个格式，方便浏览器选择性识别

 <video controls autoplay muted >
       <source  src="./img/G.E.M.邓紫棋 - 喜欢你 (Live).mp3" >
       <source  src="./img/G.E.M.邓紫棋 - 喜欢你 (Live).webm">
    </video>