最近在做一個關(guān)于短視頻的小程序,類似于微視和快手的小程序,但是在做的過程當中碰到了好多坑,于是得一步一步的去填這個坑.先來看看最后的實現(xiàn)效果
在做的過程中,想要實現(xiàn)多個視頻無限滑動播放,并且在視頻原生組件video 上需要添加各種view的效果.
首先系統(tǒng)的video組件它的層級是很高的,在上面想要添加view是不行的,于是乎只能用到了cover-view 這個組件,根據(jù)小程序開發(fā)文檔中所描述
如果說在覆蓋層只有view,text,image和button是可以通過cover-view來實現(xiàn)的(注意??cover-view是講求添加順序的,要不然點擊事件是無法響應(yīng)的)
至于滑動效果的坑就更多了:
1.利用scroll-view去實現(xiàn),但是這種的滑動效果是非常差的,并且非常卡,還要計算分頁的高度,于是放棄了
2.利用swiper-view,這個有自帶的分頁效果,在做demo的時候,看起來實現(xiàn)的效果還不錯,但是不可能有多少條數(shù)據(jù)就循環(huán)創(chuàng)建多少個video組件的吧,小程序會duang的,試過的人就知道了??
3.創(chuàng)建三個video,想要重復(fù)利用,然后不知怎么弄的,始終還是沒達到我要的效果,最后也是放棄了,看過快手小程序的源碼,是利用兩個video進行上下切換的,但是最終還是沒看懂,于是也放棄了.
最后以我個人的愚見,既然video個數(shù)越少越好,那為什么不能用一個video來實現(xiàn)呢?最終利用animation動畫,去實現(xiàn)數(shù)據(jù)源的切換,一樣可以實現(xiàn)滑動的效果,并且全程只創(chuàng)建了一個video組件,“大道至簡”果然沒錯,有時最簡單的想法反而能解決問題!
貼一下部分代碼:
<view class="page-body" style="height:{{screenH - 50}}px;" animation="{{animationData}}">
<video id='myVideo' src='{{subject.videoUrl}}' controls="{{show}}" show-center-play-btn='{{show}}' show-play-btn='{{show}}' class='canvas' show-progress='{{show}}' loop='{{true}}' objectFit='cover' autoplay="{{true}}" enable-progress-gesture='{{show}}' bindtouchstart='touchstart'
bindtouchmove='touchmove' bindtouchend='touchend' bindtouchcancel='touchcancel' bindtap='play' bindtimeupdate='timeupdate' bindplay='bindPlay' bindpause='bindPause' bindended='bindEnded'>
</video>
</view>
以上是我個人遇到的坑以及解決辦法,如果哪位大佬有更好的解決方案,希望在下方留言告知,將不勝感激...
