微信小程序实现抖音无限滑动刷视频功能

最新推荐文章于 2025-03-27 12:35:05 发布

隐姓埋名待失踪

最新推荐文章于 2025-03-27 12:35:05 发布

阅读量1.1k

点赞数 1

文章标签：微信小程序音视频小程序

本文链接：https://blog.csdn.net/qq_37210598/article/details/133272788

版权

变量定义

  data: {
        vdata: [], //存放视频url[{name:url,id:id}]
        prev_index: null, //上一个index temp
        buffer_lenth: 6, //每次缓冲的视频数量
        start_temp: 0 //当前起始位置
    },

加载视频

可以通过调用接口自己获取视频链接
我用的网址拼接随机数
如果渲染有问题可以尝试异步，用await声明一下

 async load_video(start, end) { //加载视频
        var r = []
        for (let index = start; index < end; index++) {
            var e = Math.floor(Math.random() * 8616) //获取随机数视频
            let he = "https://api.qqsuu.cn/xjj/" + e + '.mp4'
            //let he = 'http://v26-dy.ixigua.com/38c0744f0c46317127ee7d60875f09f6/6511102b/video/tos/cn/tos-cn-ve-15c001-alinc2/76c13e0053e2478abc7e20d0300fdca0/?a=2011&br=3165&bt=3165&btag=e00010000&cd=0%7C0%7C0%7C0&ch=0&cr=0&cs=0&cv=1&dr=0&ds=4&dy_q=1695613451&dy_va_biz_cert=&ft=rkG4k0071gOvGbhBH6xRfiavKYBO5-SIjjdz7tG&l=202309251144113488475587176914C187&mime_type=video_mp4&net=5&qs=0&rc=PDlnO2lpaDY0OjY8ODZpZ0BpM3BqOTc6Zjp0ZzMzNGkzM0BeMDBjLl8xNTMxYmItLy0uYSMtY2NjcjRvX2FgLS1kLWFzcw%3D%3D'
            //let he = 'https://v3-dy-o.zjcdn.com/2a6fe5d64911d7eee37a0031c11cd4f2/651123f9/video/tos/cn/tos-cn-ve-15c001-alinc2/5a534b14b75647b48c43402e187494d1/?a=1128&ch=26&cr=3&dr=0&lr=all&cd=0%7C0%7C0%7C3&cv=1&br=1844&bt=1844&cs=0&ds=3&ft=kXsR_y7oZNF0PD1oEoYxg9wdC0JTkEeC~&mime_type=video_mp4&qs=0&rc=PDo6ZzU5OTQzPGdmaTk2ZkBpanlyPGc6ZndoZDMzNGkzM0BfMjEwYDMvXzQxMC9hLjRhYSNjcG8xcjRvZG9gLS1kLWFzcw%3D%3D&btag=e000a0000&cc=1f&dy_q=1695618478&l=20230925130758646A37CB33C7B91194EC'
            //let he='https://api.qqsuu.cn/xjj/8616.mp4'
            let k = {
                name: he,
                id: index
            }
            await this.data.vdata.push(k)
        }
        this.setData({
            vdata: this.data.vdata,
        })
        let videoContext = wx.createVideoContext(this.data.start_temp + '', this) //这里对应的视频id
        videoContext.play()
    },

swiper

将视频包在swiper组件里，设置纵向滑动（vertical）
将video ，swiper ，swiper-item 样式设置为全屏覆盖
当滑动视频时触发滑动（bindchange=“currentchange”）
wxml如下

<swiper vertical='true' circular="true" style='z-index: 1;' bindchange="currentchange" class="background">
    <swiper-item wx:for="{{vdata}}" wx:key="i" current='{{item.id}}' style='z-index: 1;' class="background">
        <text class="t">{{item.id}}</text>
        <video src="{{item.name}}" id='{{item.id}}' autoplay="{{autoplay}}" controls="false" show-center-play-btn show-mute-btn='true' play-btn-position="center" enable-play-gesture="true" loop="true" style='z-index: 1;' class="background"></video>
    </swiper-item>
</swiper>

在切换时

1.处理如果是第一条对应的（this.data.prev_index）为空
因为滑动才能触发函数
所以相当于划走了第一条视频，则将其暂停
2.其他情况下，暂停上一条，播放当前
3.如果到达缓冲条数，开始缓冲下一组视频

   currentchange(e) { //切换事件
        if (e.detail.current + 1 == this.data.start_temp + this.data.buffer_lenth) {
            //加载下一组视频
            this.setData({
                start_temp: this.data.start_temp + this.data.buffer_lenth
            })
            this.load_video(this.data.start_temp, this.data.start_temp + this.data.buffer_lenth)
        }
        console.log('当前curr swiperid', e.detail.current);
        let curIdx = e.detail.current;
        //播放当前
        let thisplay = wx.createVideoContext(curIdx + '', this)
        if (thisplay.play()) {
            console.log('play', curId);
        }
        if (!this.data.prev_index) { //判断是否第一条，自动播放，滑动后暂停
            let kk = wx.createVideoContext(0 + '', this)
            this.setData({
                prev_index: curIdx
            })
            if (kk.pause()) {
                console.log('pause', curIdx);
            }
        } else {
            //其他情况下暂停上一个（this.data.prev_index），播放当前(curId)
            let videoContextPrev = wx.createVideoContext(this.data.prev_index + '', this) //this是在自定义组件下，当前组件实例的this，以操作组件内 video 组件（在自定义组件中药加上this，如果是普通页面即不需要加）
            if (this.data.prev_index != curIdx) {
                if (videoContextPrev.pause())
                    console.log("else-pause", this.data.prev_index);
                this.setData({
                    prev_index: curIdx
                })
            }
        }
    },

onLoad(options) {
        this.load_video(this.data.start_temp, this.data.buffer_lenth + this.data.start_temp)
    },

wxss

.background {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}