H5多媒体标签--视频video和音频audio

audio–音频标签

标签属性

contrils:播放器的控制面板

autoplay:自动播放

loop:循环播放

src：文件地址

preload用来缓存大的文件其中有三个值可选

none：不缓存

auto：缓存(默认)

metadata:缓存文件元信息

案例：

<audio src="年少有为.mp3" controls autoplay loop>浏览器不支持该标签时，才显示这部分文字</audio>

效果图：

video视频标签

标签属性

src:表示文件地址

contrils:播放器的控制面板

autoplay:自动播放

loop:循环播放

width:宽度

height:高度

preload用来缓存大的文件其中有三个值可选

none：不缓存

auto：缓存(默认)

metadata:缓存文件元信息

poster:当前视频还没有完全下载，或者用户还没有点击播放前的默认显示封面。默认显示当前视频文件第一帧画面

注意事项：当设置宽高的时候，一般情况下只会设置宽度或高度，让其等比例缩放。如果同时设置宽度和高度，那么视频并不会真正调整到设置的宽高。

案例：

<video src="李荣浩%20-%20年少有为.mp4" poster="1.jpg" controls width="800"></video>

效果图：

重点说明source的使用

因为不同浏览器支持的视频格式不一样，所以我们在进行视频添加的时候，需要考虑到浏览
器是否支持。我们可以准备多个格式的视频文件，让浏览器自动选择

<video>
    <source src="李荣浩%20-%20年少有为.mp4" type="video/mp4">
    <source src="李荣浩%20-%20年少有为.flv" type="video/flv">
    您的浏览器不支持当前的视频播放
</video>

浏览器视频格式兼容性参考图如下: