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

文档：

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

自动播放 autoplay

示例

参数说明

• 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{
	object-fit: cover;
}

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