小程序中视频作为页面背景

业务背景：实现在小程序原生页面中以视频作为页面背景效果

话不多说，上码，复制粘贴直接看效果

wxml:

<video id="myVideo"
src="https://download.mia.com/newpc/home.mp4"
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 // 自动播放
--><cover-view class="cover-view">
<cover-view class="cover_text">这是一段文字</cover-view>
<cover-image src="https://www.mia.com/assets/img/android.ff7e33a8.png"/>
</cover-view>

wxss:

page{width: 100%;
height: 100%;
min-height: 100%;
}
#myVideo{width: 750rpx;
height: 100%;
}.cover-view {width: 750rpx;
position: absolute;
top: 400rpx;
left: 0;
opacity: .7;
}
.cover_text{text-align: center;
margin: 20rpx 0;
}
cover-image{width: 300rpx;
margin:0 auto;
display: block;
}

效果:

参考链接：https://developers.weixin.qq.com/miniprogram/dev/component/video.html

觉得不错，赏个关注呗

小程序中视频作为页面背景相关推荐

支付宝小程序中出现拖动页面，旁边出现白边
支付宝小程序中出现拖动页面,旁边出现白边解决方法: 在全局样式文件中添加height,width都为100%: 如果还不能解决的话可能是因为你的页面里面有的元素已经超过了750rpx:或者就是你使用 ...
微信小程序页面栈_浅谈下微信小程序中的路由(页面跳转、返回、刷新、页面栈)...
什么是小程序里的"路由"?路由器吗?蒙蔽?好吧,在WEB应用中它其实就是分组数据包从源到目的地时,决定端到端路径的网络范围的进程:在小程序里就是设置页面的跳转,返回,自动刷新等一些 ...
解决微信小程序中在其他页面无法使用app.js中获取的userInfo或openid的问题
问题最近写小程序中,在app.js里获取用户的openid和userinfo,并存储为全局变量: getUserInfo: function () {var that = thiswx.getUse ...
微信小程序页面静态页是html,制作一个微信小程序中的静态页面
要求: 1. 进入开发者工具并且创建一个测试小程序, 选择建立快速模板 2. 在pages目录底下新建一个first的文件夹,其中包括指定的四个文件,并且设置第一个页面为first页面 3.在firs ...
小程序中wxss设置渐变色背景的方法
参考链接:微信小程序用CSS(.wxss)设置背景颜色渐变的方法_幕尘枫的博客-CSDN博客_微信小程序渐变背景色主要方法: page {background: -webkit-linear-gr ...
「小程序JAVA实战」小程序的视频展示页面初始化（63）
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeshipinzhanshiyemianchushihua62/ 进 ...
小程序中 wx.navigateTo 页面跳转没有反应？
页面js文件中加入 show: function () { wx.navigateTo({ url: '/pages/show/show' }) } 这个函数目的在于要做跳转到新的页面,但是你可能会 ...
微信小程序之设置所有页面背景颜色
在app.wxss中使用 page{ background-color:#fff; height:100%; } 这里需要注意的是,page前面没有点.
小程序中设置全屏背景图
page {overflow:hidden;position:fixed;background-image:url('https://qk.taiqiedu.com/bg/newword/bginfo ...
小程序 | 小程序中常用的事件 + 事件对象的属性列表 +小程序事件传参 + 小程序全局配置 + 小程序页面配置 + 小程序发起网络数据请求
文章目录一.WXML 模板语法数据绑定事件绑定 ⭐小程序中常用的事件 ⭐事件对象的属性列表 target 和 currentTarget 的区别 bindtap 的语法格式在事件处理函数中为 ...

小程序中视频作为页面背景

小程序中视频作为页面背景相关推荐

最新文章

热门文章