更新记录

1.3（2025-01-10）

增加图片数据展示的功能

1.2.5（2025-01-01）

增加拖动进度条显示帧画面的拼接规则字段

1.2.4（2025-01-01）

移除测试代码

查看更多

平台兼容性

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

仿抖音快手刷视频插件组件文档

注意：只能用于nvue页面

注意：由于uniapp项目nvue不能加密运行，所以普通授权版运行不了，想看预览效果的只能扫下面二维码体验，觉得适合再下单哈

注意：ios端只能联系作者打包体验(需提供测试机型打包证书)

注意：源码运行前需要在项目manifest.json文件勾选video模块，否则运行后显示黑屏

使用说明

  • 将插件下载到项目uni_modules目录下
  • 新建一个nvue页面引入组件
  • 参考下面页面使用示例代码即可

扫码体验Android安装包效果

Android体验二维码

已测试机型

系统 机型 系统版本 测试情况
Android 红米K60 android14 运行丝滑
ios IphoneXR ios15 运行丝滑

组件参数说明

参数 类型 说明
videoList Array 数据源
closeRefresh Boolean 关闭刷新
enbleRefresh Boolean 开启下拉刷新效果
closeRefresh Boolean 关闭刷新
deleHeight number 要减去的高度，例如页面有tabbar,需要减去相应的高度
isAutoplay Boolean 开启自动播放 ,播完当前视频会自动播放下一条视频
toolsBottom String、Number 右侧工具栏距离底部的距离，默认55px
showFrameImage Boolean 显示帧画面，配合frameImageExpRule使用，用于拖动进度显示帧图片效果
frameImageExpRule String 获取帧画面的规则，此参数会拼接在视频链接后面，例如xxx.mp4?+传入的规则

页面使用示例

  • VUE2 使用方式
<template>
    <view class="page" style="height:100%;background-color:#000;">
        <xwqNvVideo v-if="isShow" ref="nvVideo" :closeRefresh.sync="closeRefresh" :videoList="videoList" :deleHeight="50" :isAutoplay="false" @loadNext="loadNext"
            @toolsFn="toolsFn" @onRefresh="onRefresh">
            <!-- <template #default="slotProps">
                <view class="v-user-avart-wrap">
                    slotProps.item即是数组的item数据
                    <image class="v-user-avart" :src="`${slotProps.item.avatar}`" />
                </view>
            </template> -->
        </xwqNvVideo>
    </view>
</template>

<script>
    import {
        onLoad,
        onShow,
        onHide,
        onReady
    } from "@dcloudio/uni-app";
    import xwqNvVideo from '@/uni_modules/xwq-app-pl-video/components/xwq-app-pl-video/xwq-app-pl-video-v2.vue'; //vue2引入v2组件
    export default {
        components: {
            xwqNvVideo
        },
        data() {
            return {
                videoList: [],
                isShow: true,
                finished: false,
                closeRefresh: false,
                params: {
                    pagesize: 10,
                    page: 1
                }
            }
        },
        onLoad() {
            this.isShow = true;
            this.get();
        },
        onHide() {
            //暂停视频
            this.$refs['nvVideo'].stop();
        },
        onShow() {
            //播放视频
            if(this.$refs['nvVideo']){
                this.$refs['nvVideo'].play();
            }
        },
        methods: {
            //请求下一页数据
            loadNext() {
                if (this.finished) return;
                this.params.page += 1;
                this.get();
            },
            //请求数据
            get() {
                // let cacheList = uni.getStorageSync('list');

                // if (cacheList) {
                //  setTimeout(() => {
                //      this.videoList = cacheList;
                //      console.log('缓存数据=====', this.videoList);
                //  }, 1000)

                //  return
                // }
                console.log('请求参数=====', this.params);
                const requestDb = uniCloud.importObject('videoList', { customUI: false });
                requestDb.getVideo(this.params).then(res => {
                    console.log(res, '----------')
                    if (res.code == 0) {

                        if (res.detail.length < this.params.pagesize) {
                            this.finished = true;
                        }
                        if (res.detail.length == 0) return;
                        if (this.videoList.length === 0) {
                            this.videoList = res.detail;

                        } else {
                            this.videoList = [...this.videoList, ...res.detail];
                        }

                        // uni.setStorageSync('list', res.detail);
                        // console.log('视频请求结果====', this.videoList)
                    }
                }).catch(err => {
                    console.error(err)
                    uni.showToast({
                        title: '接口异常，请稍后再试!',
                        icon: 'none'
                    })
                })

            },
            //右侧菜单点击事件回调
            toolsFn(item) {
                console.log('点击的参数=====', item);
            },

            //下拉刷新回调
            onRefresh() {
                console.log('正在下拉刷新===');
                setTimeout(() => {
                    this.closeRefresh = true;
                }, 1500)
            }
        }
    }
</script>

<style>
    .v-user-avart {
        width: 100rpx;
        height: 100rpx;
        border-radius: 100rpx;
    }

    .v-user-avart-wrap {
        width: 110rpx;
        height: 110rpx;
        border: 2px solid #fff;
        border-radius: 110rpx;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        margin-bottom: 20px;
        position: relative;
        /* overflow: visible; */
    }

    .v-user-follow {
        width: 20px;
        height: 20px;
        position: absolute;
        left: 30%;
        top: 50px;
        transform: translateX(-50%);
    }

    /* 以下为光盘的样式 */
    .video-disk {
        /* // position: relative; */
        /* // background-color: #ff0000; */
    }

    .music-cover {
        position: relative;
        width: 80rpx;
        height: 80rpx;
        box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.2);
        z-index: 2;
        /* box-sizing: border-box; */
        transform: rotate(0deg);
        transition-property: transform;
        transition-duration: 5000s;
        transition-timing-function: linear;
    }

    .music-disk {
        width: 80rpx;
        height: 80rpx;
        border-radius: 80rpx;
    }

    .music-disk-user-avart {
        position: absolute;
        width: 40rpx;
        height: 40rpx;
        border-radius: 40rpx;
        margin-left: 20rpx;
        margin-top: 20rpx;
    }

    .music-logo {
        width: 20px;
        height: 20px;
        position: absolute;
        opacity: 0.8;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .control-item {
        /* border: none; */
        border-color: transparent;
        padding: 0;
        margin: 0;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
    }

    .control-text {
        font-size: 32rpx;
        color: #fff;
        font-weight: 700;
    }

    .icon-style {
        width: 80rpx;
        height: 80rpx;
    }
</style>
  • VUE3 使用方式
<template>
<view class="page" style="height:100%;background-color:#000;">
    <xwqAppPlVideo v-if="isShow" :videoList="videoList" :deleHeight="0" :isAutoplay="false"
        v-model:closeRefresh="closeRefresh" @loadNext="loadNext" @toolsFn="toolsFn" @onRefresh="onRefresh">
        //可以自定义右侧图标样式，slotProps.item即是组件抛出的对应视频数据
        // <!-- <template #default="slotProps">
        //  <view class="v-user-avart-wrap">
        //      slotProps.item即是数组的item数据
        //      <image class="v-user-avart" :src="`${slotProps.item.avatar}`" />
        //  </view>
        // </template> -->
    </xwqAppPlVideo>
</view>
</template>

<script setup lang="ts">
    import { ref, ComponentInternalInstance, getCurrentInstance, watch } from 'vue';
    import {
        onLoad,
        onShow,
        onHide,
        onReady
    } from "@dcloudio/uni-app";
    import xwqAppPlVideo from '@/uni_modules/xwq-app-pl-video/components/xwq-app-pl-video/xwq-app-pl-video.vue';

    const isShow = ref(false);
    let params = {
        pagesize: 10,
        page: 1
    };
    let finished = false;
    const closeRefresh = ref(false);
    const videoList = ref([]);

    onLoad(() => {
        isShow.value = true;
        get();
    })

    //请求数据
    const get = () => {
        console.log('请求参数====', params);
        const requestDb = uniCloud.importObject('videoList', { customUI: false });
        requestDb.getVideo(params).then(res => {
            console.log(res, '----------')
            if (res.code == 0) {

                if (res.detail.length < params.pagesize) {
                    finished = true;
                }
                if (res.detail.length == 0) return;
                if (videoList.value.length === 0) {
                    videoList.value = res.detail;

                } else {
                    videoList.value = [...videoList.value, ...res.detail];
                }
                console.log('视频请求结果====', videoList.value)
            }
        }).catch(err => {
            console.error(err)
            uni.showToast({
                title: '接口异常，请稍后再试!',
                icon: 'none'
            })
        })

    };
    //请求下一页
    const loadNext = () => {
        if (finished) return;
        ++params.page;

        get();
    };

    //右侧工具栏
    const toolsFn = (item) => {
        console.log('点击的参数=====', item);
    };

    //下拉刷新回调
    const onRefresh = () => {
        console.log('正在下拉刷新===');
        setTimeout(() => {
            closeRefresh.value = true;
        }, 1500)
    }
</script>

<style>
    .v-user-avart {
        width: 100rpx;
        height: 100rpx;
        border-radius: 100rpx;
    }

    .v-user-avart-wrap {
        width: 110rpx;
        height: 110rpx;
        border: 2px solid #fff;
        border-radius: 110rpx;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        margin-bottom: 20px;
        position: relative;
        /* overflow: visible; */
    }

    .v-user-follow {
        width: 20px;
        height: 20px;
        position: absolute;
        left: 30%;
        top: 50px;
        transform: translateX(-50%);
    }

    /* 以下为光盘的样式 */
    .video-disk {
        /* // position: relative; */
        /* // background-color: #ff0000; */
    }

    .music-cover {
        position: relative;
        width: 80rpx;
        height: 80rpx;
        box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.2);
        z-index: 2;
        /* box-sizing: border-box; */
        transform: rotate(0deg);
        transition-property: transform;
        transition-duration: 5000s;
        transition-timing-function: linear;
    }

    .music-disk {
        width: 80rpx;
        height: 80rpx;
        border-radius: 80rpx;
    }

    .music-disk-user-avart {
        position: absolute;
        width: 40rpx;
        height: 40rpx;
        border-radius: 40rpx;
        margin-left: 20rpx;
        margin-top: 20rpx;
    }

    .music-logo {
        width: 20px;
        height: 20px;
        position: absolute;
        opacity: 0.8;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .control-item {
        /* border: none; */
        border-color: transparent;
        padding: 0;
        margin: 0;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
    }

    .control-text {
        font-size: 32rpx;
        color: #fff;
        font-weight: 700;
    }

    .icon-style {
        width: 80rpx;
        height: 80rpx;
    }
</style>

接口数据格式


[
    {
        "userId": "666dd802f366f40a8b9a4dd4",//用户ID
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",//头像
        "nickname": "追风少女心💓( ˘ ³˘)💋",//昵称
        "isfollow": false,
        "videoId": "672b6be8e4ca03e4581a0063",//视频ID
        "playurl": "xxxxxxxxxx/mu38_video/1730898885724/compress_video_1125321996.m3u8",//视频链接
        "poster": "xxxxxxxxxx/mu38_video/1730898885724/compress_video_1125321996.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:FZRg1qngVIo8BPLTvFObPNUtgAA=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",//视频用户
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",//视频标题
        "loop": true,//循环播放
        "duration": 29970,//视频时长
        "playIng": false,//播放状态
        "muted": false,//是否静音
        "likeSum": 0,//视频被点赞数量
        "isLiked": false,//当前视频是否已点赞
        "commemtSum": 0,//评论的数量
        "shareSum": 0,//被分享的数量
        "imgList":[],//图片列表，当类型为图片类型2时展示图片内容
        "type": "1" //数据类型，1-视频，2-图片
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",
        "nickname": "追风少女心💓( ˘ ³˘)💋",
        "isfollow": false,
        "videoId": "672c903442a21686318cd4ad",
        "playurl": "xxxxxxxxxx/mu38_video/1730973720501/compress_video_1200159408.m3u8",
        "poster": "xxxxxxxxxx/mu38_video/1730973720501/compress_video_1200159408.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:inBQHVoZ_y-v_QO2-npeVpSvzvY=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",
        "loop": true,
        "duration": 9100,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0,
        "imgList":[
            "https://mp-f8c14aa5-9ea5-40cf-b7a4-c7319b387cde.cdn.bspapp.com/003.jpg",
            "https://mp-f8c14aa5-9ea5-40cf-b7a4-c7319b387cde.cdn.bspapp.com/004.jpg",
            "https://mp-f8c14aa5-9ea5-40cf-b7a4-c7319b387cde.cdn.bspapp.com/005.jpg"
        ],
        "type": "2"
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",
        "nickname": "追风少女心💓( ˘ ³˘)💋",
        "isfollow": false,
        "videoId": "672c911ebaea7915f45e1b09",
        "playurl": "xxxxxxxxxx/mu38_video/1730973966319/compress_video_1200405117.m3u8",
        "poster": "xxxxxxxxxx/mu38_video/1730973966319/compress_video_1200405117.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:RJvmNrC5LKkD_eWUT1o3Tid1WWI=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",
        "loop": true,
        "duration": 14280,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0,
        "imgList":[],
        "type": "1"
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",
        "nickname": "追风少女心💓( ˘ ³˘)💋",
        "isfollow": false,
        "videoId": "672ca13b29d183956332a5b2",
        "playurl": "xxxxxxxxxx/mu38_video/1730978068419/compress_video_1204507162.m3u8",
        "poster": "xxxxxxxxxx/mu38_video/1730978068419/compress_video_1204507162.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:9ZeeMpwqwo7SLJhoBeV9fCsnwSY=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",
        "loop": true,
        "duration": 10940,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0,
        "imgList":[],
        "type": "1"
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",
        "nickname": "追风少女心💓( ˘ ³˘)💋",
        "isfollow": false,
        "videoId": "672ca15529d183956332a64b",
        "playurl": "xxxxxxxxxx/mu38_video/1730978123397/compress_video_1204562476.m3u8",
        "poster": "xxxxxxxxxx/mu38_video/1730978123397/compress_video_1204562476.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:iVxxdgS871qGS2JgoFXN03nNjfQ=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",
        "loop": true,
        "duration": 9450,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0,
        "imgList":[],
        "type": "1"
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",
        "nickname": "追风少女心💓( ˘ ³˘)💋",
        "isfollow": false,
        "videoId": "672ca16b521a64050d97c506",
        "playurl": "xxxxxxxxxx/mu38_video/1730978147033/compress_video_1204586286.m3u8",
        "poster": "xxxxxxxxxx/mu38_video/1730978147033/compress_video_1204586286.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:TGPsE7W3EmCEdaETm3e8S3sQWxA=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",
        "loop": true,
        "duration": 7410,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0,
        "imgList":[],
        "type": "1"
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",
        "nickname": "追风少女心💓( ˘ ³˘)💋",
        "isfollow": false,
        "videoId": "672ca1c529d183956332a975",
        "playurl": "xxxxxxxxxx/mu38_video/1730978178134/compress_video_1204605619.m3u8",
        "poster": "xxxxxxxxxx/mu38_video/1730978178134/compress_video_1204605619.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:wFO341M63ax-f-ZHxi2p88Z5fSY=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",
        "loop": true,
        "duration": 124200,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0,
        "imgList":[],
        "type": "1"
    }
]

隐私、权限声明

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

无

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

无

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

无

评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

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

加载更多...