业务背景:实现在小程序原生页面中以视频作为页面背景效果
话不多说,上码,复制粘贴直接看效果
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
觉得不错,赏个关注呗😀