新增的多媒体标签主要包含两个:
> 音频: <audio>
> 视频: <video>
1. 视频<video>
当前<video> 元素支持三种视频格式: mp4,WebM,Ogg 尽量使用mp4格式(因为几乎所有浏览器都兼容).
1.1 视频的语法格式:
<video src="文件地址" controls="controls"></video>
1.2 视频<video>-常见属性
| 属性 |
值 |
描述 |
| autoplay |
autoplay |
视频就绪自动播放 （谷歌浏览器需要添加muted来解决自动播放问题） |
| contrcols |
contrcols |
向用户显示播放控件 |
| width |
pixels(像素) |
设置播放器宽度 |
| height |
pixels(像素) |
设置播放器高度 |
| loop |
loop |
播放完是否继续播放该视频,循环播放 |
| preload |
auto (预先加载视频) none (不应加载视频) |
规定是否预加载视频(如果有了autoplay,就忽略该属性) |
| src |
url |
视频url地址 |
| poster |
Imgurl |
加载等待的页面图片 |
| muted |
muted |
静音播放 |
2. 音频<audio>
当前<audio>元素支持三种音频格式: MP3,Wav,Ogg
2.1 音频的语法格式
<audio src="文件地址" controls="controls"></audio>
2.2 音频的常见属性
| 属性 |
值 |
描述 |
| autoplay |
autoplay |
如果出现该属性,则音频在就绪后马上播放 |
| controls |
controls |
如果出现该属性,则向用户显示控件,比如播放按钮 |
| loop |
loop |
如果出现该属性,则每当音频结束时重新开始播放 |
| src |
url |
要播放的音频的url地址 |
注: 谷歌浏览器把音频和视频自动播放禁止了
3. 多媒体标签总结
>音频标签和视频标签使用方式基本一致
>浏览器支持情况不同
>谷歌浏览器把音频和视频自动播放禁止了
>可以给视频标签添加 muted 属性来静音播放视频,但不可以播放音频(如果要自动播放可以通过JavaScript来解决)
酒枯推荐
本周推荐学习：javaweb