解決微信小程式視訊元件層級過高的問題
阿新 • • 發佈:2019-02-14
前言
在微信小程式的開發中,總有一些“VIP”元件,他們的層級,高得讓人抓狂,總是凌駕於很多其他低層級元件之上。
諸如:video元件、map元件、canvas元件等。現在就讓我來講講如何巧妙的解決掉這個問題。
問題描述
由於視訊元件層級過高並且無法使用z-index進行控制層級,導致許多人都無法在視訊元件之上放置一些其他的元件。
為此,一些漂亮的視訊設計往往還沒開始就宣告了結束。上一張官方文件的相關說明:
解決方案
解決思路其實也挺簡單的。今天就暫且不宣揚愚公移山的精神了,我們今天選擇繞過眼前的大山。既然視訊層級很高
很高,並且我們不能降低視訊層級或者提升其他元件層級已覆蓋視訊元件。那麼我們就選擇只在恰當的時候才讓視訊
元件出現在我們的頁面中。那麼問題就顯得簡單起來了。思路大致如下:
- 在渲染頁面的時候,使用假視訊來代替視訊元件,換言之就是使用視訊封面充當一個視訊元件。
- 當用戶點選視訊封面時,進行兩步操作,第一,隱藏視訊封面;第二,播放視訊。
- 當存在同一頁面多視訊的時候,需要進行視訊切換的處理。
接下來直接上程式碼了:
首先是wxml的程式碼:
<!--index.wxml--> <view> <view class="margin_bottom--100" wx:for="{{items}}" wx:key="unique"> <view class="video-container"> <view class="video" data-id="{{item.id}}" bindtap="videoPlay" > <video wx:if="{{curr_id == item.id}}" id="myVideo" style="width: 750rpx;height: calc(9 * 750rpx / 16);" id="myVideo" src="{{item.src}}" poster="{{item.poster}}" objectFit="cover" controls></video> <view wx:else > <image class="model-img" style="width: 750rpx;height: calc(9 * 750rpx / 16);" mode="aspectFill" src="{{item.poster}}"></image> <view class="model-btn"> <view class="play-icon"></view> </view> </view> </view> </view> </view> <view class="text"> <text>我是遮擋層。</text> </view> </view>
接著是js的程式碼:
//index.js Page({ data: { curr_id: '', //當前開啟的視訊id items: [ { id: 1, src: 'https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400', poster: 'http://ow74m25lk.bkt.clouddn.com/shilan.jpg' }, { id: 2, src: 'https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400', poster: 'http://ow74m25lk.bkt.clouddn.com/shilan.jpg' }, { id: 3, src: 'https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400', poster: 'http://ow74m25lk.bkt.clouddn.com/shilan.jpg' }, { id: 4, src: 'https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400', poster: 'http://ow74m25lk.bkt.clouddn.com/shilan.jpg' }, ], }, onReady: function () { //建立視訊上下文物件 this.videoContext = wx.createVideoContext('myVideo') }, videoPlay(e) { this.setData({ curr_id: e.currentTarget.dataset.id, }) this.videoContext.play() } })
最後是css的程式碼:
/*index.wxss*/
.video{
margin-bottom: 40rpx;
position: relative;
}
.model-img{
width: 100%;
height: 420rpx;
}
.model-btn{
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
width:100rpx;
height:100rpx;
border-radius:50%;
background-color: rgba(0,0,0,.3);
}
.play-icon{
margin:28rpx 42rpx;
border-top:26rpx solid transparent;
border-left:36rpx solid #fff;
border-bottom:22rpx solid transparent;
}
.text{
width: 100%;
height: 100rpx;
line-height: 100rpx;
text-align: center;
background-color: red;
color: #fff;
position: fixed;
bottom: 0;
}
以上,就是全部程式碼了,附上執行結果圖:
程式碼下載
結語
好看的皮囊千篇一律,有趣的靈魂萬里挑一。祝各位都是有趣的程式媛/猿。嗨起來٩(๑❛ᴗ❛๑)۶