更新记录

1.0.5(2023-11-26)

优化小程序端进度条拖动有点卡顿的问题

1.0.4(2023-11-22)

修复bug: 1、比如一次性给5条。只会显示前三条,服务器如果一次性给3条,分页给。但是服务器最后一次不满足三条,比如只有2条的时候。继续上拉看视频,发现下一个视频,居然是上一个视频数组的最后一条。

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.6.2 app-vue app-nvue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × ×

说明

  • 免费使用
  • 支持H5、小程序、APP(nvue)、目前只支持vue2版本,vue3版本后期更新
  • H5、小程序端采用的是3个item节点循环加载显示,到第一个视频和最后一个视频自动禁止循环滚动加载,不用担心数据过多卡顿的问题
  • 断网无法播放时显示进度条加载动效,有网络时自动加载播放
  • 不会串音,可以指定某个视频预览播放
  • 自定义进度条,可拖动播放
  • 已经封装成组件,使用简单,开箱即用,不用过多更改

快速上手

  1. 页面引入tsp-video库

    /* H5、小程序 */
    import twVideov from '@/components/tsp-video/tsp-video-list/video-v.vue';
    components:{
    twVideov
    };
    /* APP nvue */
    import twVideon from '@/components/tsp-video/tsp-video-list/video-n.vue';
    components:{
    twVideon
    };
  2. 初始加载视频数据

    /* 调用视频的初始方法 */
    this.$refs.videoGroup.initVod(data,0); //0是播放的下标(默认播放下标是0)
  3. 下拉刷新

    /* 调用视频的重新加载方法 */
    this.$refs.videoGroup.refreshSquare(data,0); //0是播放的下标(默认播放下标是0)
  4. 上拉加载

    /* 调用视频的到底加载方法方法 */
    this.$refs.videoGroup.lodingData(data);
  5. onShow()播放视频

    onShow() {
    /* 播放视频 */
    if(this.$refs.videoGroup){
        this.$refs.videoGroup.showPlay()
    }
    }
  6. onHide()暂停视频

    onHide() {
    /* 暂停视频 */
    if(this.$refs.videoGroup){
        this.$refs.videoGroup.hidePause()
    }
    }

参数配置

属性 类型 默认值 说明
loadOpen Boolean true 是否开启下拉刷新
tabBarShow Number 0 tabBar栏 0系统tabBar栏 1自定义tabBar栏
tabBarHeight Number 50 自定义底部栏的高度
speedBottom Number 0 进度条离底部的距离 px
autoplay Boolean true 初始加载完成是否自动播放
loopPlay Boolean true 是否循环播放
nextPlay Boolean false 是否开启自动播放
totalvod Number 0 视频总数量,有值才能滑动加载到最后一个视频并禁止循环滑动(仅H5、小程序支持)

事件

属性 类型 默认值 说明
@refreshData EventHandle EventHandle 下拉刷新加载回调
@lodData EventHandle EventHandle 上拉加载回调

使用示例

<template>
    <view class="content">
        <tw-videov ref="videoGroup" @lodData="loadingData" @refreshData="refreshData" :autoplay="autoplay"></tw-videov>
    </view>
</template>

<script>
    import twVideov from '@/components/tsp-video/tsp-video-list/video-v.vue'
    import vodData from '@/static/js/vodData.js' //假数据
    export default{
        components:{
            twVideov
        },
        data(){
            return {
                autoplay:true,
                videoData: vodData
            }
        },
        onLoad() {
            // #ifdef H5
            this.autoplay = false
            // #endif
            this.initVod()
        },
        onShow() {
            /* 播放视频 */
            if(this.$refs.videoGroup){
                this.$refs.videoGroup.showPlay()
            }
        },
        onHide() {
            /* 暂停视频 */
            if(this.$refs.videoGroup){
                this.$refs.videoGroup.hidePause()
            }
        },
        methods:{
            startData(){
                let list = []
                /* 模拟请求 */
                return new Promise((resolve, reject)=>{
                    setTimeout(()=>{
                        for(let i=0; i < 15; i++){
                            let obj = {
                                /** 参数数据自行拼接  */
                                vodUrl:this.videoData[i].src,
                                coverImg:this.videoData[i].coverImg, //视频封面
                                coverShow:false, //是否显示视频封面,vue 小程序端不播放会显示视频,可以不用显示封面,App不播放不会显示视频,就需要封面了
                                object_fit:this.videoData[i].object_fit, //视频的显示类型
                                sliderShow:true, //是否显示进度条
                                rotateImgShow:true, //是否显示旋转头像

                                fabulousShow:false,//是否已经点赞
                                followReally:false //是否已经关注
                            }
                            list.push(obj);
                        }
                        resolve(list)
                    },500)
                })
            },
            /* 初始加载视频数据 */
            initVod(){
                this.startData().then((res)=>{
                    if(res.length > 0){
                        /* 调用视频的初始方法 */
                        this.$refs.videoGroup.initVod(res,0); //0是播放的下标(默认播放下标是0)
                    }
                })
            },
            /* 下拉刷新 */
            refreshData(){
                this.startData().then((res)=>{
                    if(res.length > 0){
                        /* 调用视频的重新加载方法 */
                        setTimeout(()=>{
                            this.$refs.videoGroup.refreshSquare(res,0); //0是播放的下标(默认播放下标是0)
                        },2000)
                    }
                })
            },
            /* 上拉加载 */
            loadingData(){
                this.startData().then((res)=>{
                    if(res.length > 0){
                        /* 调用视频的到底加载方法方法 */
                        this.$refs.videoGroup.lodingData(res);
                    }
                })
            }
        }
    }
</script>

<style>
    page{
        background-color: #000;
    }
    .content{
        width: 100%;
        min-height: 100%;
    }
</style>

联系我

  • 需要核心源代码的可联系我,开发不易,源代码需要额外赞助一下才单独开放
  • qq:1670280472

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问