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

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;
}
相关推荐
TiAmo zhang4 小时前
微信小程序开发案例 | 通讯录小程序(上)
微信小程序·小程序·notepad++
AI大法师6 小时前
证件照如何制作?方法来了:一寸、二寸标准证件照、旅游签证、职业资格考试都可
微信小程序
sen_shan13 小时前
《微信小程序》第八章:“我的“设计
微信小程序·小程序
咸虾米18 小时前
在unicloud的云对象中如何调用同一服务空间内的另外其他云对象
javascript·微信小程序·前端框架
sen_shan19 小时前
《微信小程序》第七章:TabBar设计
微信小程序·小程序
程序00720 小时前
微信小程序app.js错误:require is not defined
javascript·微信小程序·小程序
云起SAAS20 小时前
斗兽棋象狮虎豹狼小游戏抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·斗兽棋象狮虎豹狼小游戏
幽络源小助理20 小时前
微信小程序火锅店点餐系统SSM源码
微信小程序
江城开朗的豌豆20 小时前
webpack了解吗,讲一讲原理,怎么压缩代码
前端·javascript·微信小程序
江城开朗的豌豆20 小时前
Webpack配置魔法书:从入门到高手的通关秘籍
前端·javascript·微信小程序