更新记录

1.9.5（2025-12-04）

添加屏幕捏合手势操作

1.9.4（2025-11-28）

ios进度条样式调整

1.9.3（2025-11-17）

改版升级插件，重新架构

查看更多

平台兼容性

Android Android CPU类型 iOS
适用版本区间：5.0 - 16.0 armeabi-v7a：支持，arm64-v8a：支持，x86：支持 适用版本区间：13 - 18

原生插件通用使用流程：

  1. 购买插件，选择该插件绑定的项目。
  2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
  4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

# 超级播放器DIY 可仿抖音 仿快手 短剧 影视 直播 点播 教育播放器

概述

1.功能全面，支持点播 直播 android exo内核 iOS ijkplayer avplayer内核
2.缓存
3.android 支持视频格式 m3u8,flv,mp4,webm,ts,mpd,mkv 支持rtmp直播
4.ios 支持视频格式 m3u8,flv,mp4,mov 支持rtmp直播
5.仿抖音 share,comment,like,avatar,focus,title,music,component 等自定义控件

插件集成准备事项

一，勾选官方videoPlayer 二，试用 勾选云端插件： 三，自定义基座： 四，选定基座运行：

播放器代码标签

  <oxVideo ref='video' style='boxStyle' :data='boxData' :bgImg='bgImg' :loadIcon='loadIcon'></oxVideo>

注：:data='boxData'  可选 没有时 需要执行 initVideoData 接口 有时 则不用在调用 initVideoData借口

监听事件

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

模块接口

initVideoData

初始化

var param = {
   index: 0, //首次播放索引
    coreType: 1, //内核 0 ios(AVPlayer) android(exo) 1 ijk
    scaleMode: 1, //0 :自动调节 默认  1自适应 2 全屏 有切边 3 全屏 android起作用 
    openCache: true, //是否开启缓存
    showLoading:true,//缓冲时加载是否显示
    freshUp:false,//上拉刷新关闭
    freshDown:false,//下拉刷新关闭
    scrollEnabled: false, //屏幕是否开启滚动
    isLoop: true, //是否循环播放 true 视频重复循环播放 false 播放完成自动下一个视频
    portraitTopStyles: {}, //纵向 不随屏滚动控件样式
    portraitStyles: portraitStyles.styles, //纵向 控件样式
    landscapeStyles: landscapeStyles.styles, //横向全屏 控件样式
    data: [{
     "vid": 22245,
  "title": "#健康科普 #运动",
  "desc": '测试22',
  "index":3,
  "collectNum":3,
  "commentNum":4,
  "shareNum":5,
  "likeNum":6,
  "isFocus":false,
  "isLike":true,
  "isCollect":true,
  "isLive":true,
  "thumb": "http://p1-dy.byteimg.com/large/tos-cn-p-0015/d6addaee76f3495d840d6dff8d2216e0_1575363173.jpeg?from=2563711402_large",
  "url": "http://photo.51myjt.com/docs/video/1f8a177b070d49d19a547a240d8b3dbe.mp4",
  "avatar": "http://p1-dy.byteimg.com/large/tos-cn-p-0015/d6addaee76f3495d840d6dff8d2216e0_1575363173.jpeg?from=2563711402_large",
  "musicCover": "http://p1-dy.byteimg.com/large/tos-cn-p-0015/d6addaee76f3495d840d6dff8d2216e0_1575363173.jpeg?from=2563711402_large",
  "portraitStyles":[style],
  "landscapeStyles":[style]
    };
var ox = this.$refs.video;
ox.initVideoData(param);

start

开始播放

示例代码

 let ox = this.$refs.video;
ox.start();

pause

暂停播放

示例代码

 let ox = this.$refs.video;
ox.pause();

resume

恢复播放

示例代码

 let ox = this.$refs.video;
ox.pause();

next

播放器下一集

示例代码

 let ox = this.$refs.video;
ox.next(false);//是否显示动态效果

prev

播放器上一集

示例代码

 let ox = this.$refs.video;
ox.prev(false);//是否显示动态效果

replay

重新播放

示例代码

 let ox = this.$refs.video;
ox.replay();

playIndex

播放索引视频

示例代码

 let ox = this.$refs.video;
ox.playIndex(1);

isFullScreen

是否全屏播放

示例代码

 let ox = this.$refs.video;
let isFullScreen = ox.isFullScreen();

setVolume

设置音量

示例代码

 let ox = this.$refs.video;
ox.setVolume(1.0);

setMuted

设置静音

示例代码

let ox = this.$refs.video;
ox.setMuted(true);

setSpeed

设置倍速

示例代码

let ox = this.$refs.video;
ox.setSpeed(1.0);

rotate

旋转方向

示例代码

let ox = this.$refs.video;
ox.rotate();

clean

销毁播放器

示例代码

let ox = this.$refs.video;
ox.clean();

setScrollEnabled

播放器上下滚动是否开启

示例代码

let ox = this.$refs.video;
ox.setScrollEnabled(true);

duration

获取视频时长

示例代码

let ox = this.$refs.video;
let duration = ox.duration();

position

获取播放位置

示例代码

let ox = this.$refs.video;
let position = ox.position();

updatePortraitHeight

调整视频高度 向上抬起

示例代码

let ox = this.$refs.video;
ox.updatePortraitHeight(500);

screenShot

获取视频截图 返回base64

示例代码

let ox = this.$refs.video;
let screenShot = ox.screenShot();

addCaches

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

示例代码

let ox = this.$refs.video;
ox.addCaches({data:[视频数据]});

clearCache

清理缓冲

示例代码

let ox = this.$refs.video;
ox.clearCache();

openDanmaku

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

示例代码

let ox = this.$refs.video;
ox.openDanmaku();

closeDanmaku

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

示例代码

let ox = this.$refs.video;
ox.closeDanmaku();

clearDanmaku

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

示例代码

let ox = this.$refs.video;
ox.clearDanmaku();

addDanmaku

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

示例代码

let data = {'time':1000,'text':'弹幕','color':'#FFFFFF','size':14};
let ox = this.$refs.video;
ox.addDanmaku(data);

addDanmakus

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

示例代码

let data = {'data':[{'time':1000,'text':'弹幕','color':'#FFFFFF','size':14}]};
let ox = this.$refs.video;
ox.addDanmakus(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": []
}]};
let ox = this.$refs.video;
ox.addDataAfter(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": []
}]};
let ox = this.$refs.video;
ox.addDataBefore(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": []
}]};
let ox = this.$refs.video;
ox.insertDataBefore(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
  }]
};
let ox = this.$refs.video;
ox.addPortraitComponent(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
  }]
};
let ox = this.$refs.video;
ox.updatePortraitComponent(component);

removePortraitComponent

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

示例代码

type类型有 top:上部 middle:中部 bottom:底部 
let component = {
  'code': code
};
let ox = this.$refs.video;
ox.removePortraitComponent(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
  }]
};
let ox = this.$refs.video;
ox.addLandscapeComponent(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
  }]
};
let ox = this.$refs.video;
ox.updateLandscapeComponent(component);

removeLandscapeComponent

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

示例代码

let component = {
  'code': code
};
let ox = this.$refs.video;
ox.removeLandscapeComponent(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": ""
  }
};
let ox = this.$refs.video;
ox.updateVideoModelAtIndex(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": ""
  }
};
let ox = this.$refs.video;
ox.updateCurrentModel(data);

seekTo

滑动到自定位置

示例代码

let ox = this.$refs.video;
ox.seekTo(1000);

setScreenScaleType

设置视频自适应模式

示例代码

//0 :自动调节 默认  1自适应 2 全屏 有切边 3 全屏 android起作用
let ox = this.$refs.video;
ox.setScreenScaleType(1);

getCurrentItem

获取当前播放视频数据

示例代码

let ox = this.$refs.video;
let item = ox.getCurrentItem();

getSpeed

获取视频倍速

示例代码

let ox = this.$refs.video;
let speed = ox.getSpeed();

stopFresh

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

示例代码

let ox = this.$refs.video;
ox.stopFresh();

隐私、权限声明

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

无

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

无

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

无

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