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

星星你个星星星2025-03-20 14:45

wxml

html 复制代码

<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

css 复制代码

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