H5多媒体标签

多媒体标签分为 音频 audio 和视频 video 两个标签 使用它们，我们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件了。

audio 音频标签

格式	MIMe-TYPe
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

source标签

可以通过在多媒体标签内加入source标签，用来指定多个播放路径，当第一个source标签的路径出错时，自动会切换到第二个source标签

audio指定单一音频源：audio中添加src属性 audio指定多个音频源：source标签替代audio的src属性 type：类型，
当前音频文件的具体类型 ， audio/mpeg : audio是大类型/具体类型 （MIMEtype） 图片类型： jpg ,
jpeg ----- image/jpeg

audio常用属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。

注意：谷歌浏览器禁用了autoplay属性，因为它认为界面一打开就播放音频，如果音频声音比较大，体验不太好。

video 视频标签

支持的格式

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

video常用属性、方法、事件

属性	方法	事件
duration 视频播放时长	play 播放	canplay 视频加载完毕 准备播放
currentTime 当前播放进度	pause 暂停	timeupdate 播放时-持续触发
volume 音量大小

video常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controls	controls	向用户显示播放控件
width	pixels(像素)	设置播放器宽度
height	pixels(像素)	设置播放器高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto（预先加载视频）none（不应加载视频）	规定是否预加载视频(如果有了autoplay 就忽略该属性）
src	url	视频url地址
poster	Imgurl	加载等待的画面图片 （视频首帧：首画面。海报）
muted	muted	静音播放

• 音频标签和视频标签使用基本一致
• 浏览器支持情况不同
• 谷歌浏览器把音频和视频自动播放禁止了
• 我们可以给视频标签添加 muted 属性可以自定播放视频，音频不可以
• 视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性

object-fit属性

当video标签视频内容宽度没有铺满video标签时，可以在css写上 该属性即可