微信小程序实现多视频-video踩坑之路

经过一周对多视频上下滑动播放的摸索，终于得到了可观的成绩，接下来先讲一下我的摸索之路。
介绍：video这个层级非常高，如果要在video上面放一些视频介绍必须要用到cover-view,而cover-view里面只支持嵌套 cover-view、cover-imag，button，而且内部cover-view样式如果要用position:fixed的话，在它外面必须也要加上position:fixed才可以显示，反正就是问题多多
1、第一次尝试单单用了video进行循环播放，touchmove手势,cover-view覆盖
结果：滑动体验差且视频一多容易卡顿
2、最终：采用swiper+video+view搞定成功，要想滑动体验舒服，就要图片轮播的感觉，要想轮播的有视频就加video,要想视频上面覆盖一些信息，就在跟vidoe同级地方用position:absolute

<swiper class="video_box" duration="200滑动动画的时长" vertical="true滑动纵向" bindchange="set_key" easing-function="easeInOutCubic滑动的动画类型"><block wx:for="{{ msg 视频列表 }}" wx:key="index"><swiper-item class="video_list"><block><video style="height:{{item.height}}px" id="vcr{{ index }}" wx:if="{{ index == paly_state }}"src="视频的链接" autoplay="" controls="{{ false}}" loop="{{ true}}" object-fit="cover"custom-cache="{{false}}" enable-progress-gesture="{{ false }}" catchtap='videoTap'data-before="{{ item.finish_duration }}"></video><view class="v1"><!-- 悬浮在视频上方：放视频的标题啊，介绍啊之类的信息 --></view></block></swiper-item></block></swiper>

//切换视频set_key(e) {let key = e.detail.currentlet that = thisthat.setData({paly_state: key})},//暂停or播放videoTap(state) {let videoContext = wx.createVideoContext('vcr' + this.data.paly_state, this) //这里对应的视频idthis.setData({//视频状态，播放还是暂停vcr_state: !this.data.vcr_state})if (!this.data.vcr_state) {videoContext.play() //播放} else {videoContext.pause() //暂停}},

.video_box {width: 100%;height: auto;position: fixed;top: 0;bottom: 0;background-color: #000;
}
.video_list {width: 100%;height: 100vh;position: relative;
}.video_list video {width: 100%;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;
}
.v1{max-width: 70%;opacity: 0.95;position: absolute;left: 2%;bottom: 4%;color: white;}

微信小程序实现多视频-video踩坑之路相关推荐

微信小程序实现大转盘抽奖----踩坑之路
微信小程序实现大转盘抽奖----踩坑之路需求:现在有一个小程序抽奖页面如下,此类抽奖方式为大转盘思路:由服务端获取抽奖次数和奖品,根据服务端的中奖概率来决定是否中奖,最后利用小程序动画将转盘转起来 ...
小程序多个echars_微信小程序中使用echarts以及踩坑总结
人在家中坐,锅从天上来. 半个月前本来在家写着一个项目,还没来得及提测,领导突然一个电话,需要立刻去支援另一个项目,一打听,一个烂尾半年的项目,纵使内心不愿意,还是要去啊.因为鲁迅说过,生活就像强*, ...
微信小程序遮罩层悬浮窗踩坑
总结一下踩坑的几个点: 有遮罩层之后底层的页面还会触发滚动遮罩层只在页面初始的地方有,如果滚动到下方就没有了如图,这样肯定是不符合需求的,先看一下这个不太符合需求的代码 .wxml <!-- ...
【小程序，h5页面】踩坑之路
点击下方标题可快速定位 1.[小程序]IOS端在showLoading和hideLoading之后showToast会不显示 2. [小程序]1rpx border 在IOS端显示不全问题 3. [H ...
微信小程序模仿开眼视频app（一）——视频首页、视频详情、分类
可到我的github账号上去copy文件先展示一下我实现了的功能吧提示,如果有出现无法加载域名之类问题的的,可以在"设置"-"项目设置"-打钩"不 ...
教你如何用手机下载视频号[微信小程序]中的视频
** 如何下载微信视频号**[微信小程序]**中的视频 ** 事情是这样的,因为近期所在工作单位要迎接检查,老板发了几个小程序视频给我,需要我把他下下来,我最初找了一下,并不能够找到下载按钮,就打算改 ...
微信小程序实战开发视频
微信小程序实战开发视频: 链接:http://pan.baidu.com/s/1jIAwBLs 密码:ej3b
使用Filler4提取微信小程序中的视频
因为需要做防范电信网络诈骗的宣传,但是相关视频网站的内容都不适合宣传使用,最后在微信小程序搜索到一些合适的内容,但是微信小程序的视频不能直接下载,就考虑通过获得文件地址直接下载. 1.机器环境系统: ...
视频教程-微信小程序快速入门视频课程-微信开发
微信小程序快速入门视频课程北京八维研修学院技术工程师,5年大型项目实战开发经验,3年授课经验. 孟宪杰 ¥168.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 AP ...

微信小程序实现多视频-video踩坑之路

微信小程序实现多视频-video踩坑之路相关推荐

最新文章

热门文章