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

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;
}
相关推荐
右子3 小时前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
江城开朗的豌豆6 小时前
uni-app弹层遮罩难题?看我如何见招拆招!
前端·javascript·微信小程序
江城开朗的豌豆6 小时前
小程序生命周期漫游指南:从诞生到落幕的完整旅程
前端·javascript·微信小程序
江城开朗的豌豆6 小时前
跨平台开发实战:我的小程序双端(iOS、安卓)开发指南
前端·javascript·微信小程序
毕设源码-江学长7 小时前
计算机毕业设计java共享茶室预约微信小程序 微信小程序中的共享茶室预订平台 茶室共享预约小程序的设计与开发
java·微信小程序·课程设计
云起SAAS2 天前
SCL-90症状自评量表抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·scl-90症状自评量表·scl-90
LoveEate2 天前
uniapp 运行/发版微信小程序
微信小程序·小程序·uni-app
韩立学长2 天前
【开题答辩实录分享】以《基于微信小程序的糖尿病居家健康管理系统》为例进行答辩实录分享
微信小程序·小程序
卷Java2 天前
预约记录关联查询接口说明
java·开发语言·spring boot·python·微信小程序
云起SAAS2 天前
族谱家谱抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·族谱家谱