1.视频标签- video
当前 <video> 元素支持三种视频格式： 尽量使用 mp4格式
使用语法
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg"></video>
支持格式
video支持格式
由于各个浏览器的支持情况不同，所以会有一种兼容性的写法，这种写法了解一下即可,播放规则:第一个不行就播放第二个,可以准备几个不同格式webm mp4 ogg的视频文件做一个小兼容
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持 <video> 标签播放视频
</ video >
常用属性
video常用属性
属性很多，有一些属性需要重点掌握：
- src 必写属性： 视频的资源路径
- controls="controls" ,controls 展示播放控件,播放暂停声音,进度条等等不常用,因为在不同浏览器会有不同的ui展示效果 后续会通过视频标签的一些api自己实现视频播放控件的效果。目的保证不同浏览器展示相同的效果
- loop="loop",loop 视频播放完毕之后会停留在最后一帧(最后一个画面) 循环播放
- autoplay 一进入页面就自动播放.chrome66版本之后禁止视频和音频的自动播放,firefox火狐浏览器也禁用.
添加一个muted静音属性即可实现自动播放 - muted 静音
- 如果在访问页面的过程当中想要实现提前加载视频
preload="auto" 和 autoplay 自动播放的视频无需添加preload="auto"不预先加载视频 preload="none" - poster 视频封面,poster="图片的路径"
2.音频标签- audio
当前 <audio> 元素支持三种视频格式： 尽量使用 mp3格式
使用语法
<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
支持格式
audio支持格式
常用属性
audio常用属性
小结
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器把音频和视频自动播放禁止了
- 我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决）
- 视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性
