最近在做一个关于短视频的小程序,类似于微视和快手的小程序,但是在做的过程当中碰到了好多坑,于是得一步一步的去填这个坑.先来看看最后的实现效果
image.png
在做的过程中,想要实现多个视频无限滑动播放,并且在视频原生组件video 上需要添加各种view的效果.
首先系统的video组件它的层级是很高的,在上面想要添加view是不行的,于是乎只能用到了cover-view 这个组件,根据小程序开发文档中所描述
image.png
如果说在覆盖层只有view,text,image和button是可以通过cover-view来实现的(注意⚠️cover-view是讲求添加顺序的,要不然点击事件是无法响应的)
至于滑动效果的坑就更多了:
1.利用scroll-view去实现,但是这种的滑动效果是非常差的,并且非常卡,还要计算分页的高度,于是放弃了
2.利用swiper-view,这个有自带的分页效果,在做demo的时候,看起来实现的效果还不错,但是不可能有多少条数据就循环创建多少个video组件的吧,小程序会duang的,试过的人就知道了😢
3.创建三个video,想要重复利用,然后不知怎么弄的,始终还是没达到我要的效果,最后也是放弃了,看过快手小程序的源码,是利用两个video进行上下切换的,但是最终还是没看懂,于是也放弃了.
最后以我个人的愚见,既然video个数越少越好,那为什么不能用一个video来实现呢?最终利用animation动画,去实现数据源的切换,一样可以实现滑动的效果,并且全程只创建了一个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>
以上是我个人遇到的坑以及解决办法,如果哪位大佬有更好的解决方案,希望在下方留言告知,将不胜感激...
