微信小程序中使用视频作为背景

wxml

<video id="video-bg"
src=""
loop        
muted
controls="{{false}}"
show-play-btn="{{false}}"
show-center-play-btn="{{false}}"
enable-progress-gesture="{{false}}"
object-fit="cover"
autoplay></video>

代码解释

• src // 视频链接 （要播放视频的资源地址，支持云文件id）
• loop // 自动循环
• muted // 静音
• controls="{{false}}" // 视频控制器
• show-play-btn="{{false}}" // 底部播放按钮
• show-center-play-btn="{{false}}" // 中心播放按钮
• enable-progress-gesture="{{false}}" // 播放手势，即双击切换播放/暂停
• object-fit="cover" // 视频大小
• autoplay // 自动播放

wxss

#video-bg {
  width: 100vw;
  height: 100vh;
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
}