更新记录

1.2.2(2025-09-29)

修复IOS端已知问题

1.2.1(2025-09-27)

移除调试log

1.2.0(2025-09-27)

IOS端优化视频自动缓存

查看更多

平台兼容性

uni-app x(4.66)

Chrome Safari Android Android插件版本 iOS iOS插件版本 鸿蒙 微信小程序
- - 5.0 1.1.2 12 1.1.2 - -

xwq-player-video

仿抖音刷视频插件文档

插件功能说明

  • 插件使用原生播放器封装(非官方组件),支持Android/IOS端
  • 自动管理播放缓存
  • 视频预加载
  • 数据分页加载
  • 进度条显示
  • 进度条支持拖拽调整进度
  • 倍速调整
  • 收藏、喜欢、分享侧边栏
  • 清屏操作
  • 查看全集按钮内容自定义
  • 持续更新。。。。。

插件api、参数说明

名称 类型 必填 默认值 描述
autoNext boolean N false 是否自动播放下一个视频
list UTSJSONObject[] Y null 视频数据源,必填
onLoadNext ()=>void N null 触发加载下一页的回调函数
onToolsHandler (e : UTSJSONObject) =>void N null 侧边图标事件回调函数
onPlaying (e : UTSJSONObject) =>void N null 正在播放状态回调函数
onPause (e : UTSJSONObject) =>void N null 暂停时回调函数
onEnded (e : UTSJSONObject) =>void N null 结束时回调函数
onTimeUpdate (e : UTSJSONObject) =>void N null 播放进度回调
onChange (e : UTSJSONObject) =>void N null 视频切换时回调函数
onLookAllHandle (e : UTSJSONObject) =>void N null 标题底部的查看全局按钮,是否显示以及文本内容均配置在数据里面
requestFullScreen (val : boolean) =>void N null 请求全屏播放(即清除屏幕上层元素)
play () =>void N null 手动播放视频
pause () =>void N null 手动暂停视频
playVideo (index:number) =>void N null 指定视频播放
updateSeekBarProgress (index:number,progress:number) =>void N null 设置视频进度到指定位置
showDialogPlayback () =>void N null 显示倍速修改弹窗选项

已测试机型

系统 机型 系统版本 测试情况
Android 红米K60 android15 运行丝滑
IOS iphoneX ios16 运行丝滑

页面使用示例

<template>
    <view>
        <view class="video">
            <xwqPlayerVideo v-if="showVideo" ref="videoRef" :style="{width:'100%',height:`${systemInfo.windowHeight}`}"
                :autoNext="true" :list="listData" @onLoadNext="onLoadNext" @onToolsHandler="onToolsHandler" @onPlaying=""
                @onPause="onPause" @onEnded="" @onTimeUpdate="" @onChange="onChange" @onLookAllHandle="onLookAllHandle">
            </xwqPlayerVideo>
        </view>
    </view>
</template>

<script setup>
    import xwqPlayerVideo from '@/uni_modules/xwq-player-video/components/xwq-player-video/xwq-player-video.uvue';
    import { VideoType } from '@/uni_modules/xwq-player-video/utssdk/interface.uts';
    import testData from './testData';

    // const listData=ref(testData.slice(0,5));
    const listData = ref([] as UTSJSONObject[]);
    const showVideo = ref(false);
    const systemInfo = uni.getSystemInfoSync();
    type RequestType = {
        pagesize : number,
        page : number
    }

    let params = {
        pagesize: 12,//必须是3的倍数
        page: 1
    } as RequestType;
    let finished = false;
    const videoRef = ref<XwqPlayerVideoComponentPublicInstance | null>(null);

    /**
     * 加载数据
     */
    const getVideoList = () => {
        listData.value = testData;
        showVideo.value = true;
    };

    getVideoList();

    /**
     * 请求下一页
     */
    const onLoadNext = () => {
        console.log('*****************加载下一页数据**************')
        if (finished) return;
        ++params.page;
        // getVideoList();
    }

    /**
     * 监听播放状态
     */
    const  = (e : UTSJSONObject) => {
        console.log('正在播放====', e)
    }

    /**
     * 监听暂停状态
     */
    const onPause = (e : UTSJSONObject) => {
        console.log('已暂停====', e)
    }

    /**
     * 结束状态
     */
    const  = (e : UTSJSONObject) => {
        console.log('已结束====', e)
    }

    /**
     * 播放进度
     */
    const  = (e : UTSJSONObject) => {
        // console.log('播放进度====', e)
    }

    /**
     * 切换视频触发
     */
    const onChange = (e : UTSJSONObject) => {
        console.log('切换视频====', e)
    }

    /**
     * 播放指定视频
     */
    const playVideo = () => {
        videoRef.value?.playVideo?.(2)
    };

    const play = () => {
        console.log('播放')
        videoRef.value?.play?.()
    }

    const pause = () => {
        console.log('暂停')
        videoRef.value?.pause?.()
    }
    /**
     * 右侧工具栏
     */
    const onToolsHandler = (e : UTSJSONObject) => {
        console.log('tools事件====', e)
    }

    /**
     * 查看全集按钮事件
     */
    const onLookAllHandle=(e : UTSJSONObject) => {
        console.log('查看全集====', e)
    }

    /**
     * 设置进度
     */
    const updateSeekBarProgress = () => {
        videoRef.value?.updateSeekBarProgress?.(2, 10484)
    }

    /**
     * 设置倍率
     */
    const showDialogPlayback=() => {
        videoRef.value?.showDialogPlayback?.()
    }
</script>

<style>
    .fix {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
    }

    .btn-play {
        position: absolute;
        left: 50px;
        top: 150px;
        color: #323030;
        width: auto;
    }

    .btn-pause {
        position: absolute;
        left: 50px;
        top: 220px;
        color: #323030;
        width: auto;
    }
</style>

接口数据格式

[
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1744677303367.jpg",
        "nickname": "妈妈不要哭泣妈",
        "isfollow": false,
        "videoId": "672b6be8e4ca03e4581a0063",
        "playurl": "https://djappmedia.kunpengtn.com/app/short_dram_m3u8/1960537711245058050/HD/episode-45/output.m3u8?auth_key=***-0-0-19755932390ccceeddfdadcb2cdc9501",
        "poster": "https://cdn.niuwei1688.com/mu38_video/1732963247242/compress_video_3189636609.m3u8?vframe/jpg/offset/1/&e=***&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:RxyhEFHcLCC329QwgB51amuWMPE=",
        "vduser": "追风少女💓( ˘ ³˘)💋",
        "vdtitle": "黄亚男早年丧偶,带着年幼的两个儿子和一个女儿艰难度日,其中一个孩子还遗传了逝父的哮喘",
        "loop": true,
        "duration": 0,
        "playIng": false,
        "muted": false,
        "likeSum": 99,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0, 
        "isPlaying": false,
        "position":0,
        "showTitleArrow":true,
        "showLookAllBtn":true,
        "lookAllBtnText":"会员解锁 - 查看全局85集",
        "toolInfo":[{"icon":"shoucang","text":"追剧"},{"icon":"dianzan","num":99,"text":"点赞"},{"icon":"share","text":"分享"}]
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1744677303367.jpg",
        "nickname": "妈妈不要哭泣",
        "isfollow": false,
        "videoId": "672c903442a21686318cd4ad",
        "playurl": "https://djappmedia.kunpengtn.com/app/short_dram_m3u8/1960537711245058050/HD/episode-46/output.m3u8?auth_key=***-0-0-0a6b47742f0a25cd471dde2dac251dbf",
        "poster": "https://cdn.niuwei1688.com/mu38_video/1730973720501/compress_video_1200159408.m3u8?vframe/jpg/offset/1/&e=***&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:eVN-msN740qMoBZ_fO2ff0jw5jY=",
        "vduser": "追风少女💓( ˘ ³˘)💋",
        "vdtitle": "黄亚男早年丧偶,带着年幼的两个儿子和一个女儿艰难度日,其中一个孩子还遗传了逝父的哮喘",
        "loop": true,
        "duration": 0,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0, 
        "isPlaying": false,
        "position":0,
        "showTitleArrow":true,
        "showLookAllBtn":false,
        "lookAllBtnText":"会员解锁 - 查看全局85集",
        "toolInfo":[{"icon":"shoucang","text":"追剧"},{"icon":"dianzan","num":199,"text":"点赞"},{"icon":"share","text":"分享"}]
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1744677303367.jpg",
        "nickname": "妈妈不要哭泣",
        "isfollow": false,
        "videoId": "672c911ebaea7915f45e1b09",
        "playurl": "https://djappmedia.kunpengtn.com/app/short_dram_m3u8/1960537711245058050/HD/episode-47/output.m3u8?auth_key=***-0-0-d620b1a14b5d08568b9e306034fdfe67",
        "poster": "https://cdn.niuwei1688.com/mu38_video/1730973966319/compress_video_1200405117.m3u8?vframe/jpg/offset/1/&e=***&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:mL2rXqRQSkd_2Q0xXPh2TSguErA=",
        "vduser": "追风少女💓( ˘ ³˘)💋",
        "vdtitle": "黄亚男早年丧偶,带着年幼的两个儿子和一个女儿艰难度日,其中一个孩子还遗传了逝父的哮喘",
        "loop": true,
        "duration": 0,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0, 
        "isPlaying": false,
        "position":0,
        "showTitleArrow":true,
        "showLookAllBtn":true,
        "lookAllBtnText":"会员解锁 - 查看全局85集",
        "toolInfo":[{"icon":"shoucang","text":"追剧"},{"icon":"dianzan","num":299,"text":"点赞"},{"icon":"share","text":"分享"}]
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1744677303367.jpg",
        "nickname": "妈妈不要哭泣",
        "isfollow": false,
        "videoId": "672ca13b29d183956332a5b2",
        "playurl": "https://djappmedia.kunpengtn.com/app/short_dram_m3u8/1960537711245058050/HD/episode-48/output.m3u8?auth_key=***-0-0-851267e7ae01465f1fc92fec5226878a",
        "poster": "https://cdn.niuwei1688.com/mu38_video/1730978068419/compress_video_1204507162.m3u8?vframe/jpg/offset/1/&e=***&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:Lki9zkDgJ9mpGfj7K155l3pjlmQ=",
        "vduser": "追风少女💓( ˘ ³˘)💋",
        "vdtitle": "黄亚男早年丧偶,带着年幼的两个儿子",
        "loop": true,
        "duration": 0,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0, 
        "isPlaying": false,
        "position":0,
        "showTitleArrow":true,
        "showLookAllBtn":false,
        "lookAllBtnText":"会员解锁 - 查看全局85集",
        "toolInfo":[{"icon":"shoucang","text":"追剧"},{"icon":"dianzan","num":699,"text":"点赞"},{"icon":"share","text":"分享"}]
    }
]

隐私、权限声明

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

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

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