<video>标签为html5新增标签。在广东互联网协会官网项目中,首页引入了一次此标签,使用了preload属性以及webkit-playsinline属性。首次使用<video>实践真实项目,所以我想根据w3school上对该标签的描述,对其进行一次使用方法的总结。
使用video标签
- <video>标签(<audio>与之基本相同)
基本用法:
<video src="movie.mp4" controls="controls">
您的浏览器不支持 video 标签。出不支持该标签的信息。
</video>
可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。
兼容问题:Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。
属性:
1、autoplay: 自动播放,如果出现该属性,则视频/音频在就绪后马上播放。
2、preload: 预加载,如果出现该属性,则视频/音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
3、controls: 显示播放控件,如果出现该属性,则向用户显示视频/音频控件,比如播放按钮。
4、loop: 视频/音频循环播放
5、poster: 值为一个url,规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
6、muted:静音
7、src:要播放的视频/音频的 URL。
8、width与height: 设置视频播放器的宽高。
2、<source>标签
<source> 标签用于规定可替换的视频/音频文件,供浏览器根据它对媒体类型或者编解码器的支持进行选择。
例如:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持audio标签
</audio>
3、ios端不自动全屏播放
<video src="1.mp4" webkit-playsinline playsinline x5-playsinline x-webkit-airplay="allow"></video>