HTML5新增的多媒体标签
2020-04-21 本文已影响0人
八月飞花
这两个标签分别是 video 和 audio
audio音频标签
属性
src:播放路径
controls:显示控制面板
auto:自动播放:但是页面需要添加交互才能实现自动播放
loop:循环
video视频标签
属性
src:播放路径
controls:显示控制面板
auto:自动播放:但是页面需要添加交互才能实现自动播放
loop:循环
width:宽度
height:高度
设置宽高的时候,默认设置的宽度或高度中的一个生效,另一个虽然也生效,但是
不会影响视频的画面,视频始终等比例
poster:当视频还没有完全下载或者用户还没点击播放前的默认显示封面,默认
显示当前视频文件的第一幅画面,可以是图片路径
<video poster="路径"></video>
由于受到不同浏览器支持视频文件不一样,需要考虑浏览器是否支持
我们可以准备多个视频文件,让浏览器进行选择
视频
设置多个格式的视频,会逐一匹配,直到匹配到可以解析的文件
<video>
<source src="视频路径" type="video/编码格式1">
<source src="视频路径" type="video/编码格式2">
<source src="视频路径" type="video/编码格式3">
</video>