更新记录

1.2.0（2025-12-27）

优化安卓创建视图后背景显示逻辑。

1.1.9（2025-12-27）

修复IOS创建视图后灰色背景异常情况。

1.1.8（2025-12-21）

新增播放器静态背景图设置参数。

平台兼容性

uni-app x(4.71)

概述

XF-douYinSlidePlayerUTS插件实现仿抖音带UI界面的上下滑动播放视频功能。增加了预缓存功能，可以减少视频滑动时播放停顿的感觉。同时界面上集成了全屏播放按钮功能，可以全屏和滑动播放无缝切换播放。

不能嵌套在 scroll-view

模块配置

如果单独使用本插件，安卓端运行提示不存在ijkplayer的内核请在安卓端的config.json中增加以下配置

{
    "id": "com.github.52yaoer:uts-ijkplayer",
    "source": "implementation 'com.github.52yaoer:uts-ijkplayer:1.0.0'"
}

模块调用

<dy-slide-player ref="douYinSlidePlayer" @playerevent="onPageEvent"
    :style="{width:widthNum+'rpx',height:heightNum+'rpx',background:yanse}">
</dy-slide-player>

模块接口

loadVideoView

初始化加载播放视图(在用户引导授权同意后执行，不调用本方法插件不能正常使用，且只需要执行一次)

loadVideoView("静态资源图")

示例代码

// #ifdef APP-ANDROID
import { DySlidePlayerElement } from 'uts.sdk.modules.XFDouYinSlidePlayerUTS';
// #endif
// #ifdef APP-ANDROID
(this.$refs["douYinSlidePlayer"] as DySlidePlayerElement).loadVideoView("/static/img_video_loading.jpg");
// #endif
// #ifdef APP-IOS
this.$refs["douYinSlidePlayer"].loadVideoView("/static/img_video_loading.jpg");
// #endif

可用性

iOS、Android系统

可提供的1.0.0及更高版本

setVideoDatas

设置播放器播放数据

uni-app项目中（nvue）调用示例：

import { setVideoDatas } from "@/uni_modules/XF-douYinSlidePlayerUTS"

setVideoDatas({
    videos : [],
    startPlayIndex : 0,
    complete: (res) => {
        console.log(res)
    }
})

uni-app x项目（uvue）中调用示例：

import { setVideoDatas } from "@/uni_modules/XF-douYinSlidePlayerUTS";
import { SetVideoDataOptions } from "@/uni_modules/XF-douYinSlidePlayerUTS/utssdk/interface.uts";

let options = {
  videos : [] as ItemInfo[],
  startPlayIndex : 0,
  complete: (res : any) => {
    console.log(res)
  }
} as SetVideoDataOptions;
setVideoDatas(options);

可用性

iOS、Android系统

可提供的1.0.0及更高版本

addVideoDatas

添加分页数据

uni-app项目中（nvue）调用示例：

import { addVideoDatas } from "@/uni_modules/XF-douYinSlidePlayerUTS"

addVideoDatas({
    videos : [],
    complete: (res) => {
        console.log(res)
    }
})

uni-app x项目（uvue）中调用示例：

import { addVideoDatas } from "@/uni_modules/XF-douYinSlidePlayerUTS";
import { AddVideoDataOptions } from "@/uni_modules/XF-douYinSlidePlayerUTS/utssdk/interface.uts";

let options = {
  videos : [] as ItemInfo[],
  complete: (res : any) => {
    console.log(res)
  }
} as AddVideoDataOptions;
addVideoDatas(options);

可用性

iOS、Android系统

可提供的1.0.0及更高版本

showLikeCount

设置当前页的点赞数量

uni-app项目中（nvue）调用示例：

import { showLikeCount } from "@/uni_modules/XF-douYinSlidePlayerUTS"

showLikeCount({
    value : "",
    complete: (res) => {
        console.log(res)
    }
})

uni-app x项目（uvue）中调用示例：

import { showLikeCount } from "@/uni_modules/XF-douYinSlidePlayerUTS";
import { ShowCountOptions } from "@/uni_modules/XF-douYinSlidePlayerUTS/utssdk/interface.uts";

let options = {
  value : "",
  complete: (res : any) => {
    console.log(res)
  }
} as ShowCountOptions;
showLikeCount(options);

可用性

iOS、Android系统

可提供的1.0.0及更高版本

showCommonCount

设置当前页的评论数量

uni-app项目中（nvue）调用示例：

import { showCommonCount } from "@/uni_modules/XF-douYinSlidePlayerUTS"

showCommonCount({
    value : "",
    complete: (res) => {
        console.log(res)
    }
})

uni-app x项目（uvue）中调用示例：

import { showCommonCount } from "@/uni_modules/XF-douYinSlidePlayerUTS";
import { ShowCountOptions } from "@/uni_modules/XF-douYinSlidePlayerUTS/utssdk/interface.uts";

let options = {
  value : "",
  complete: (res : any) => {
    console.log(res)
  }
} as ShowCountOptions;
showCommonCount(options);

可用性

iOS、Android系统

可提供的1.0.0及更高版本

showShareCount

设置当前页的分享数量

uni-app项目中（nvue）调用示例：

import { showShareCount } from "@/uni_modules/XF-douYinSlidePlayerUTS"

showShareCount({
    value : "",
    complete: (res) => {
        console.log(res)
    }
})

uni-app x项目（uvue）中调用示例：

import { showShareCount } from "@/uni_modules/XF-douYinSlidePlayerUTS";
import { ShowCountOptions } from "@/uni_modules/XF-douYinSlidePlayerUTS/utssdk/interface.uts";

let options = {
  value : "",
  complete: (res : any) => {
    console.log(res)
  }
} as ShowCountOptions;
showShareCount(options);

可用性

iOS、Android系统

可提供的1.0.0及更高版本

pauseVideo

暂停视频播放

uni-app项目中（nvue）调用示例：

import { pauseVideo } from "@/uni_modules/XF-douYinSlidePlayerUTS"

pauseVideo()

uni-app x项目（uvue）中调用示例：

import { pauseVideo } from "@/uni_modules/XF-douYinSlidePlayerUTS";

pauseVideo();

可用性

iOS、Android系统

可提供的1.0.0及更高版本

playVideo

暂停后恢复视频播放

uni-app项目中（nvue）调用示例：

import { playVideo } from "@/uni_modules/XF-douYinSlidePlayerUTS"

playVideo()

uni-app x项目（uvue）中调用示例：

import { playVideo } from "@/uni_modules/XF-douYinSlidePlayerUTS";

playVideo();

可用性

iOS、Android系统

可提供的1.0.0及更高版本

playNext

播放下一个视频

uni-app项目中（nvue）调用示例：

import { playNext } from "@/uni_modules/XF-douYinSlidePlayerUTS"

playNext()

uni-app x项目（uvue）中调用示例：

import { playNext } from "@/uni_modules/XF-douYinSlidePlayerUTS";

playNext();

可用性

iOS、Android系统

可提供的1.0.0及更高版本

playPrevious

播放上一个视频

uni-app项目中（nvue）调用示例：

import { playPrevious } from "@/uni_modules/XF-douYinSlidePlayerUTS"

playPrevious()

uni-app x项目（uvue）中调用示例：

import { playPrevious } from "@/uni_modules/XF-douYinSlidePlayerUTS";

playPrevious();

可用性

iOS、Android系统

可提供的1.0.0及更高版本

clearCache

清空视频缓存文件

uni-app项目中（nvue）调用示例：

import { clearCache } from "@/uni_modules/XF-douYinSlidePlayerUTS"

clearCache()

uni-app x项目（uvue）中调用示例：

import { clearCache } from "@/uni_modules/XF-douYinSlidePlayerUTS";

clearCache();

可用性

iOS、Android系统

可提供的1.0.0及更高版本