更新记录

1.0.1（2025-11-27）

ios横竖屏切换完善 static目录下有uts模版参考

jx-player

超级播放器1.0.1版本

1.0.0（2025-11-25）

新插件发布

jx-player

超级播放器1.0.0版本

平台兼容性

uni-app(4.64)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android Android插件版本 iOS iOS插件版本 鸿蒙
- - - - - - 5.0 1.0.1 13 1.0.1 -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - - - -

uni-app x(4.35)

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

其他

多语言 暗黑模式 宽屏模式
√ × √

jx-player

开发文档

模块概述

1.支持点播,直播，抖音滑动播放
2.缓存,分集播放 支持 m3u8缓存
3.android 支持视频格式 m3u8,flv,mp4,webm,ts,mpd,mkv 支持rtmp直播
4.ios 支持视频格式 m3u8,flv,mp4,mov 支持rtmp直播
5.component 等自定义控件
<template>
    <jx-player ref="video" style="width: 100%;height: 100%"></jx-player>
</template>

<script>
import * as UTSPlayer from "../../uni_modules/jx-player";
    export default {
        data() {
            return {
            }
        },
        onLoad() {

        },
        onReady() {
           UTSPlayer.onCallback(function (res) {
               let ee = JSON.parse(result) as UTSJSONObject;
               let code = ee["code"];
              //  0 播放进度 progress position duration
              //  1 滚动到播放记录返回 currentIndex
              //  2 滑动到最后一个视频
              //  3 播放 
              //  4 暂停 
              //  5 缓冲
              //  6 准备播放返回 
              //  7 网络错误
              //  8 播放完成
              //  9 开始播放中止
              //  10 当前播放器的状态
              //  11 播放完成
              //  13 方向旋转事件 返回 isFullscreen(boolean)
              //  14 下拉刷新
              //  15 上拉刷新
              //  19 向下滑动返回
              //  20 向上滑动返回
           });
            UTSPlayer.setVideoData(res);
        },
        methods: {

        }
    }
</script>

<style>

</style>

onCallback

设置全局事件监听返回

示例代码

UTSPlayer.onCallback(function (res) {
 let ee = JSON.parse(result) as UTSJSONObject;
               let code = ee["code"];
              //  0 播放进度 progress position duration
              //  1 滚动到播放记录返回 currentIndex
              //  2 滑动到最后一个视频
              //  3 播放 
              //  4 暂停 
              //  5 缓冲
              //  6 准备播放返回 
              //  7 网络错误
              //  8 播放完成
              //  9 开始播放中止
              //  10 当前播放器的状态
              //  11 播放完成
              //  13 方向旋转事件 返回 isFullscreen(boolean)
              //  14 下拉刷新
              //  15 上拉刷新
              //  19 向下滑动返回
              //  20 向上滑动返回
});

setVideoData

设置初始化数据

示例代码

格式请参考示例代码
const test_data = {
    index: 0, //首次播放索引
    coreType: 1, //内核 0 ios(AVPlayer) android(exo) 1 ijk
    scaleMode: 0, //0 :自动调节 默认  1自适应 2 全屏 有切边 3 全屏 android起作用 
    openCache: true, //是否开启缓存
    showLoading: false, //缓冲时加载是否显示
    freshUp: false, //上拉刷新开启
    freshDown: false, //下拉刷新开启
    scrollEnabled: true, //屏幕是否开启滚动
    isLoop: true, //是否循环播放 true 视频重复循环播放 false 播放完成自动下一个视频
    portraitTopStyles: topStyles.topStyles, //纵向 不随屏滚动控件样式 参考demo
    portraitStyles: portStyles.portStyles, //纵向 随屏滚动控件样式 参考demo
    landscapeStyles: landStyles.landStyles, //横向全屏 控件样式 参考demo
    data: vdata.videoData
};
UTSPlayer.setVideoData(JSON.stringify(initData));

start

开始播放

示例代码

UTSPlayer.start();

pause

暂停播放

示例代码

UTSPlayer.pause();

resume

恢复播放

示例代码

UTSPlayer.pause();

next

播放器下一集

示例代码

UTSPlayer.next(false);//是否显示动态效果

prev

播放器上一集

示例代码

UTSPlayer.prev(false);//是否显示动态效果

replay

重新播放

示例代码

UTSPlayer.replay();

playIndex

播放索引视频

示例代码

UTSPlayer.playIndex(1);

isFullScreen

是否全屏播放

示例代码

let isFullScreen = UTSPlayer.isFullScreen();

setVolume

设置音量

示例代码

UTSPlayer.setVolume(1.0);

setMuted

设置静音

示例代码

UTSPlayer.setMuted(true);

setSpeed

设置倍速

示例代码

UTSPlayer.setSpeed(1.0);

rotate

旋转方向

示例代码

UTSPlayer.rotate();

clean

销毁播放器

示例代码

UTSPlayer.clean();

setScrollEnabled

播放器上下滚动是否开启

示例代码

UTSPlayer.setScrollEnabled(true);

duration

获取视频时长

示例代码

let duration = UTSPlayer.duration();

position

获取播放位置

示例代码

let position = UTSPlayer.position();

updatePortraitHeight

调整视频高度 向上抬起

示例代码

UTSPlayer.updatePortraitHeight(500);

screenShot

获取视频截图 返回base64

示例代码

let screenShot = UTSPlayer.screenShot();

addCaches

添加缓冲 数据与视频数据数组相同

示例代码

UTSPlayer.addCaches(JSON.stringify({data:[视频数据]}));

clearCache

清理缓冲

示例代码

UTSPlayer.clearCache();

openDanmaku

打开弹幕面板 点播播放模式都可用

示例代码

UTSPlayer.openDanmaku();

closeDanmaku

关闭弹幕面板 点播播放模式都可用

示例代码

UTSPlayer.closeDanmaku();

clearDanmaku

清理弹幕 点播播放模式都可用

示例代码

UTSPlayer.clearDanmaku();

addDanmaku

发送弹幕 点播播放模式都可用

示例代码

let data = {'time':1000,'text':'弹幕','color':'#FFFFFF','size':14};
UTSPlayer.addDanmaku(JSON.stringify(data));

addDanmakus

发送一组弹幕 点播播放模式都可用

示例代码

let data = {'data':[{'time':1000,'text':'弹幕','color':'#FFFFFF','size':14}]};
UTSPlayer.addDanmakus(JSON.stringify(data));

addDataAfter

追加视频数据 一般code==2是调用 滑到最后一条数据时调用

示例代码

let data = {data:[{
    "vid": 22682,
    "title": "没缘分就散",
    "desc": '没缘分就散',
    "index": 3,
    "collectNum": 3,
    "commentNum": 4,
    "shareNum": 5,
    "likeNum": 6,
    "isFocus": false,
    "isLike": true,
    "isCollect": true,
    "isLive": true,
    "thumb": "",
    "url": "",
    "avatar": "",
    "musicCover": "",
    "portraitStyles": [],
    "landscapeStyles": []
}]};
UTSPlayer.addDataAfter(JSON.stringify(data));

addDataBefore

往最前添加视频数据

示例代码

let data = {data:[{
    "vid": 22682,
    "title": "没缘分就散",
    "desc": '没缘分就散',
    "index": 3,
    "collectNum": 3,
    "commentNum": 4,
    "shareNum": 5,
    "likeNum": 6,
    "isFocus": false,
    "isLike": true,
    "isCollect": true,
    "isLive": true,
    "thumb": "",
    "url": "",
    "avatar": "",
    "musicCover": "",
    "portraitStyles": [],
    "landscapeStyles": []
}]};
UTSPlayer.addDataBefore(JSON.stringify(data));

insertDataBefore

往索引处添加视频数据

示例代码

let data = {index:2,data:[{
    "vid": 22682,
    "title": "没缘分就散",
    "desc": '没缘分就散',
    "index": 3,
    "collectNum": 3,
    "commentNum": 4,
    "shareNum": 5,
    "likeNum": 6,
    "isFocus": false,
    "isLike": true,
    "isCollect": true,
    "isLive": true,
    "thumb": "",
    "url": "",
    "avatar": "",
    "musicCover": "",
    "portraitStyles": [],
    "landscapeStyles": []
}]};
UTSPlayer.insertDataBefore(JSON.stringify(data));

addPortraitComponent

竖屏添加自定义控件

示例代码

type类型有 top:上部 middle:中部 bottom:底部 
let component = {
    'x': x,
    'y': y,
    'w': 60,
    'h': 30,
    'type': 'middle',
    'radius': 10,
    'backgroundColor': '#a3270e',
    'alpha': 0.8,
    'border': 0,
    'borderColor': '#E066FF',
    'code': code,
    'hidden': false,
    'autoHidden': true,
    'data': { 'x': x, 'y': y, 'w': 60, 'h': 30, 'code': code, 'text': text },
    'animation': 0, //隐藏 动画 显示隐藏时起作用 0正常 1左 2右 3上 4下
    'texts': [{
        'x': 0,
        'y': 0,
        'w': 60,
        'h': 30,
        'textSize': 16,
        'text': text,
        'textColor': '#FFFFFF',
        'code': tcode
    }],
    'pics': [{
        'path': getResourcePath('/static/vip.png'),//支持http
        'x': 35,
        'y': 0,
        'w': 25,
        'h': 12,
        'code': pcode
    }]
};
UTSPlayer.addPortraitComponent(JSON.stringify(component));

updatePortraitComponent

竖屏更新自定义控件

示例代码

type类型有 top:上部 middle:中部 bottom:底部 
let component = {
    'x': x,
    'y': y,
    'w': 60,
    'h': 30,
    'type': 'middle',
    'radius': 10,
    'backgroundColor': '#a3270e',
    'alpha': 0.8,
    'border': 0,
    'borderColor': '#E066FF',
    'code': code,
    'hidden': false,
    'autoHidden': true,
    'data': { 'x': x, 'y': y, 'w': 60, 'h': 30, 'code': code, 'text': text },
    'animation': 0, //隐藏 动画 显示隐藏时起作用 0正常 1左 2右 3上 4下
    'texts': [{
        'x': 0,
        'y': 0,
        'w': 60,
        'h': 30,
        'textSize': 16,
        'text': text,
        'textColor': '#FFFFFF',
        'code': tcode
    }],
    'pics': [{
        'path': getResourcePath('/static/vip.png'),//支持http
        'x': 35,
        'y': 0,
        'w': 25,
        'h': 12,
        'code': pcode
    }]
};
UTSPlayer.updatePortraitComponent(JSON.stringify(component));

removePortraitComponent

竖屏去除自定义控件 要与添加的自定义控件code值一致

示例代码

type类型有 top:上部 middle:中部 bottom:底部 
let component = {
    'code': code
};
UTSPlayer.removePortraitComponent(JSON.stringify(component));

addLandscapeComponent

横屏添加自定义控件

示例代码

type类型有 top:上部 middle:中部 bottom:底部 
let component = {
    'x': x,
    'y': y,
    'w': 60,
    'h': 30,
    'type': 'middle',
    'radius': 10,
    'backgroundColor': '#a3270e',
    'alpha': 0.8,
    'border': 0,
    'borderColor': '#E066FF',
    'code': code,
    'hidden': false,
    'autoHidden': true,
    'data': { 'x': x, 'y': y, 'w': 60, 'h': 30, 'code': code, 'text': text },
    'animation': 0, //隐藏 动画 显示隐藏时起作用 0正常 1左 2右 3上 4下
    'texts': [{
        'x': 0,
        'y': 0,
        'w': 60,
        'h': 30,
        'textSize': 16,
        'text': text,
        'textColor': '#FFFFFF',
        'code': tcode
    }],
    'pics': [{
        'path': getResourcePath('/static/vip.png'),//支持http
        'x': 35,
        'y': 0,
        'w': 25,
        'h': 12,
        'code': pcode
    }]
};
UTSPlayer.addLandscapeComponent(JSON.stringify(component));

updateLandscapeComponent

横屏更新自定义控件

示例代码

type类型有 top:上部 middle:中部 bottom:底部 
let component = {
    'x': x,
    'y': y,
    'w': 60,
    'h': 30,
    'type': 'middle',
    'radius': 10,
    'backgroundColor': '#a3270e',
    'alpha': 0.8,
    'border': 0,
    'borderColor': '#E066FF',
    'code': code,
    'hidden': false,
    'autoHidden': true,
    'data': { 'x': x, 'y': y, 'w': 60, 'h': 30, 'code': code, 'text': text },
    'animation': 0, //隐藏 动画 显示隐藏时起作用 0正常 1左 2右 3上 4下
    'texts': [{
        'x': 0,
        'y': 0,
        'w': 60,
        'h': 30,
        'textSize': 16,
        'text': text,
        'textColor': '#FFFFFF',
        'code': tcode
    }],
    'pics': [{
        'path': getResourcePath('/static/vip.png'),//支持http
        'x': 35,
        'y': 0,
        'w': 25,
        'h': 12,
        'code': pcode
    }]
};
UTSPlayer.updateLandscapeComponent(JSON.stringify(component));

removeLandscapeComponent

横屏去除自定义控件 要与添加的自定义控件code值一致

示例代码

let component = {
    'code': code
};
UTSPlayer.removeLandscapeComponent(JSON.stringify(component));

updateVideoModelAtIndex

更新自定位置视频数据

示例代码

let data = {
    'index': 1,
    'data': {
        "vid": 22682,
        "title": "没缘分就散",
        "desc": '没缘分就散',
        "index": 3,
        "collectNum": 3,
        "commentNum": 4,
        "shareNum": 5,
        "likeNum": 6,
        "isFocus": false,
        "isLike": true,
        "isCollect": true,
        "isLive": true,
        "thumb": "",
        "url": "",
        "avatar": "",
        "musicCover": ""
    }
};
UTSPlayer.updateVideoModelAtIndex(JSON.stringify(data));

updateCurrentModel

更新当前视频数据

示例代码

let data = {
    'data': {
        "vid": 22682,
        "title": "没缘分就散",
        "desc": '没缘分就散',
        "index": 3,
        "collectNum": 3,
        "commentNum": 4,
        "shareNum": 5,
        "likeNum": 6,
        "isFocus": false,
        "isLike": true,
        "isCollect": true,
        "isLive": true,
        "thumb": "",
        "url": "",
        "avatar": "",
        "musicCover": ""
    }
};
UTSPlayer.updateCurrentModel(JSON.stringify(data));

seekTo

滑动到自定位置

示例代码

UTSPlayer.seekTo(1000);

setScreenScaleType

设置视频自适应模式

示例代码

//0 :自动调节 默认  1自适应 2 全屏 有切边 3 全屏 android起作用
UTSPlayer.setScreenScaleType(1);

getCurrentItem

获取当前播放视频数据

示例代码

let item = UTSPlayer.getCurrentItem();

getSpeed

获取视频倍速

示例代码

let speed = UTSPlayer.getSpeed();

stopFresh

停止刷新 滑动播放模式可用

示例代码

UTSPlayer.stopFresh();

getResourcePath

获取资源路径

示例代码

红包进度
UTSPlayer.getResourcePath('/static/logo.png');

隐私、权限声明

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

无

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

无

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

无

评论列表 撰写评论 向官方投诉
加载更多...