video标签自动播放视频和移动端封面空白问题解决

文档：

• https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video

自动播放 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;
}

参考
如何隐藏video的下载按钮