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

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

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

本文地址：https://blog.csdn.net/lzz123987csdn/article/details/111996232