基本使用当前 元素支持三种视频格式: 尽量使用 mp4格式使用语法: <video src="media/mi.mp4"></video>
属性很多,有一些属性需要大家重点掌握:
autoplay
自动播放- 注意: 在google浏览器上面,默认禁止了自动播放,如果想要自动播放的效果,需要设置 muted属性
width
宽度height
高度loop
循环播放src
播放源muted
静音播放
示例代码:
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg"></video>
音频标签- audio
基本使用
当前 元素支持三种视频格式: 尽量使用 mp3格式
使用语法:
<audio src="media/music.mp3"></audio>
audio 常用属性
示例代码:
<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
小结
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器把音频和视频自动播放禁止了
- 我们可以给视频标签添加 muted 属性来静音播放视频,音频不可以(可以通过JavaScript解决)
- 视频标签是重点,我们经常设置自动播放,不使用 controls 控件,循环和设置大小属性