業務背景：實作在小程式原生頁面中以視頻作為頁面背景效果
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://www.uj5u.com/yidong/242911.html
標籤：其他