文档:
自动播放 autoplay
示例
<video
src="xxxx/xxx.mp4"
autoplay="autoplay"
loop="loop"
muted="muted"
controls="controls"
controlsList="nodownload"
height="100%" width="100%">
</video>
参数说明
- autoplay 自动播放
- muted 静音,如果autoplay不自动播放,添加muted会静音自动播放
- controls 控制
- src 视频资源
- controlsList=“nodownload” 隐藏下载按钮
通过css隐藏下载按钮
video::-webkit-media-controls {
overflow: hidden !important;
}
video::-webkit-media-controls-enclosure {
width: calc(100% + 32px);
margin-left: auto;
}
设置封面 poster
微信端和手机浏览器显示如下
可以设置封面poster
就不会显示空白了
<video
src="xxxx/xxx.mp4"
poster="image.png"
>
</video>
如果封面位置不对,可以设置适配
.video{
object-fit: cover;
}