评论

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  
点赞 8
收藏
评论

12 个评论

  • 有点意思
    有点意思
    2022-09-19


    如果视频总数是5条,播放下标设置成3,向上划不动。

    2022-09-19
    赞同 1
    回复 1
    • Joker
      Joker
      09-02
      请问有解决办法了吗
      09-02
      回复
  • 林先森
    林先森
    2023-06-06

    滑动快,顺序就会发生错乱,其次还有滑动到最后,再上滑,会出现黑屏

    2023-06-06
    赞同
    回复 2
    • 哈罗哈皮
      哈罗哈皮
      2023-06-07
      我看看
      2023-06-07
      2
      回复
    • 什么
      什么
      05-08回复哈罗哈皮
      这个问题解决了嘛
      05-08
      回复
  • c
    c
    2022-01-14

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

    2022-01-14
    赞同
    回复
  • 971112
    971112
    2021-11-19

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

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

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

    2021-09-10
    赞同
    回复 4
    • 哈罗哈皮
      哈罗哈皮
      2021-09-11
      我这里不做循环列表,如果需要循环列表直接使用官方扩展组件即可
      2021-09-11
      回复
    • 李乾坤David
      李乾坤David
      2022-10-31回复哈罗哈皮
      官网的有问题
      2022-10-31
      回复
    • believe
      believe
      2023-08-01回复哈罗哈皮
      你好,请问官方扩展组件从哪里找?
      2023-08-01
      回复
    • 哈罗哈皮
      哈罗哈皮
      2023-08-10回复believe
      去我主页看下,解决方案1,应该有
      2023-08-10
      回复
  • xxxXXX
    xxxXXX
    2021-08-18

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

    2021-08-18
    赞同
    回复 1
    • 哈罗哈皮
      哈罗哈皮
      2021-09-11
      你用什么测试的,我这边暂时没发现这样的问题
      2021-09-11
      回复
  • 立青
    立青
    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
    赞同
    回复 8
    • 哈罗哈皮
      哈罗哈皮
      2021-04-25
      参考微信扩展的组件,修改成自己业务需求
      2021-04-25
      回复
    • 好命先生
      好命先生
      2022-08-10回复哈罗哈皮
      大佬,有线上的完整小程序效果参考吗?
      2022-08-10
      回复
    • 哈罗哈皮
      哈罗哈皮
      2022-08-11回复好命先生
      搜索,“品拓”小程序首页视频就是用这个组件
      2022-08-11
      回复
    • 好命先生
      好命先生
      2022-08-11回复哈罗哈皮
      我们的需求不用做轮播,你这个组件能直接用?
      2022-08-11
      回复
    • 哈罗哈皮
      哈罗哈皮
      发表于小程序端
      2022-08-11回复好命先生

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

      2022-08-11
      回复
    查看更多(3)

正在加载...

登录 后发表内容