评论

video-swiper短视频轮播,解决方案2(增加动态加载数据)

一个常用的短视频播放,可以定位到某个视频开始播放,可以是有限数据进行轮播播放,可以动态获取数据播放,不知是否满足你的小需求,欢迎star一个,感谢;

实现短视频小程序指定到某个视频开始轮播,方案1已经解析过,这里就不多说了,不懂的可以请移步到这里查看:https://developers.weixin.qq.com/community/develop/article/doc/000c2e0afc8cc8b2a96b36d665b413

这里主要讲的是,如何进行动态加载数据问题

第一步,在获取数据列表中加个条件判断,如果超过你设置的长度就算二次获取数据,进行数据切割加到将要预览的数组里面,代码如下(主要看条件判断,这里以10个数据为例):

videoList: {
            typeArray,
            value: [],
            observerfunction observer() {
                var newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
                if (newVal.length) {
                    newVal.map((item, index) => {
                        return item.idxKey = index + 1;
                    });
                    if (newVal.length<=10) {
                        this._videoListChanged(newVal);
                    } else { // 重点是这里的条件判断
                        // 防止当前数组被污染
                        let arr = JSON.parse(JSON.stringify(newVal));
                        // 去掉已有的数据
                        let nextArr = arr.splice(this.data.total);
                        this.data.nextQueue.push(...nextArr);
                    }
                    this.setData({total: newVal.length})
                }
            }
        }


第二步,在每次滑动视频时,判断下当前视频总数和剩下视频个数,满足条件即可请求加载数据,代码如下:

// 判断总数据是否大于等于10,并且下滑剩下4个视频开始请求接口拿数据;这里大小可以根据自己需求修改
if (total>=10 && nextQueue.length < 5) {
  this.triggerEvent('UpdataVideo', {});
}


就加这两步,轻松完成一个短视频,从定位到某个视频开始播放,到数据没有时进行预加载视频。

有什么问题,欢迎随时咨询。

完整版代码片段:https://developers.weixin.qq.com/s/Ikk98ymm7tph

最后一次编辑于  2021-04-14  
点赞 6
收藏
评论

10 个评论

  • c
    c
    01-14

    你好 我是用video-swiper 安卓真机调式不能滑动 应该是video层级的问题 ,应该怎么解决

    01-14
    赞同
    回复
  • 健入佳境
    健入佳境
    2021-11-19

    为什么上滑之后 顺序就会发生错乱

    2021-11-19
    赞同
    回复 5
    • 健入佳境
      健入佳境
      2021-11-19
      有遇到这种问题么
      2021-11-19
      回复
    • 哈罗哈皮
      哈罗哈皮
      2021-11-19
      可能滑动太快了,所以乱了,这个应该是swiper还没触发完就跳过了,导致顺序错乱
      2021-11-19
      回复
    • 健入佳境
      健入佳境
      2021-11-19回复哈罗哈皮
      楼主没有遇到 快速滑动视频 会导致视频重复的问题么 毕竟官方案例测试了一下 也是有问题的  楼主有遇到么
      2021-11-19
      回复
    • 虓^O^
      虓^O^
      02-10回复哈罗哈皮
      大佬 这个有办法解决吗
      02-10
      回复
    • 虓^O^
      虓^O^
      02-10
      快速滑动视频 会导致视频重复的问题 楼主你解决了吗
      02-10
      回复
  • 🍦
    🍦
    2021-09-10

    楼主~4个以上视频就开始循环播放列表,怎么不循环

    2021-09-10
    赞同
    回复 1
    • 哈罗哈皮
      哈罗哈皮
      2021-09-11
      我这里不做循环列表,如果需要循环列表直接使用官方扩展组件即可
      2021-09-11
      回复
  • Ghost
    Ghost
    2021-08-18

    你好 这边假如视频长度增加到11个 current_index设置为9 滚动到最后一个再往上滑 会出现重复加载的情况 偶尔会直接黑屏(swiper的current变成了-1)

    2021-08-18
    赞同
    回复 1
    • 哈罗哈皮
      哈罗哈皮
      2021-09-11
      你用什么测试的,我这边暂时没发现这样的问题
      2021-09-11
      回复
  • zj
    zj
    2021-06-30

    如果有需求是在播放时可以实时点击列表跳转视频,该如何处理呢

    2021-06-30
    赞同
    回复 1
    • 哈罗哈皮
      哈罗哈皮
      2021-06-30
      绑定下标或者id,就可以实现跳转?跳转不是问题吧?
      2021-06-30
      回复
  • 那是光
    那是光
    2021-06-05

    滑动视频的时候上一个视频还在播放,不知道啥问题,还有现在video不支持同层渲染了吗,我看微视,快手的控件都没了

    2021-06-05
    赞同
    回复 1
    • 哈罗哈皮
      哈罗哈皮
      2021-06-07
      滑动上个视频还在播放,是因为你没有暂停上一个视频,video在基础库2.4.0开始就支持同层渲染了
      2021-06-07
      回复
  • 黑丶阳
    黑丶阳
    2021-05-18

    请教一个问题,就是你在使用video的时候报渲染层错误是怎么解决的?

    2021-05-18
    赞同
    回复 1
    • 哈罗哈皮
      哈罗哈皮
      2021-05-18
      这个我不处理,不影响使用吧
      2021-05-18
      回复
  • 月光
    月光
    2021-04-23
    大佬,这是自己做了一个短视频小程序?
    2021-04-23
    赞同
    回复 5
    • 哈罗哈皮
      哈罗哈皮
      2021-04-25
      参考微信扩展的组件,修改成自己业务需求
      2021-04-25
      回复
    • 好命先生
      好命先生
      1天前回复哈罗哈皮
      大佬,有线上的完整小程序效果参考吗?
      1天前
      回复
    • 哈罗哈皮
      哈罗哈皮
      21小时前回复好命先生
      搜索,“品拓”小程序首页视频就是用这个组件
      21小时前
      回复
    • 好命先生
      好命先生
      11小时前回复哈罗哈皮
      我们的需求不用做轮播,你这个组件能直接用?
      11小时前
      回复
    • 哈罗哈皮
      哈罗哈皮
      发表于小程序端
      6小时前回复好命先生

      不用轮播那直接写video显示就行,不用写这么麻烦

      6小时前
      回复
  • 编程由我
    编程由我
    2021-04-22

    请问一下,用户上传视频时怎么安全检测的呢

    2021-04-22
    赞同
    回复 1
    • 哈罗哈皮
      哈罗哈皮
      2021-04-23
      这种检查一般都是买第三方的检测接口来过滤吧,我现在没做这个,人工检测
      2021-04-23
      回复
  • 海阔天空
    海阔天空
    2021-04-12

    代码片段好像打不开呢

    2021-04-12
    赞同
    回复 10
    • 哈罗哈皮
      哈罗哈皮
      2021-04-12
      我可以打开哦,不知道你那里会提示什么?
      2021-04-12
      回复
    • 海阔天空
      海阔天空
      2021-04-12回复哈罗哈皮
      嗯嗯,重启下开发者工具可以了
      2021-04-12
      回复
    • 哈罗哈皮
      哈罗哈皮
      2021-04-12回复海阔天空
      好的
      2021-04-12
      回复
    • 海阔天空
      海阔天空
      2021-04-12回复哈罗哈皮
      请问下定位到某个视频开始播放,current_index:2,但是视频播放显示是video_4,这个好像没有对应上
      2021-04-12
      回复
    • 哈罗哈皮
      哈罗哈皮
      2021-04-13回复海阔天空
      我看看
      2021-04-13
      回复
    查看更多(5)
登录 后发表内容