更新记录

1.0.3（2024-10-24）

ios横屏旋转问题修复

oxe-player

超级播放器1.0.3版本

1.0.1（2024-10-18）

接口放到uts文件中

oxe-player

超级播放器1.0.1版本

1.0.0（2024-10-16）

超级播放器1.0.0版本发布

查看更多

平台兼容性

Vue2 Vue3
√ √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.23，Android：5.0，iOS：9，HarmonyNext：不确定 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

oxe-player

开发文档

模块概述

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

<script>
import { setVideoData, start, pause, resume, next, prev, replay, playIndex, openDanmaku, closeDanmaku, clearDanmaku, addDanmaku, addDanmakus, dmSeekTo, enterFullScreen, exitFullScreen, clean, addComponent, updateComponent, updateDataAtIndex, addDataBefore, seekTo, setMuted, setVolume, setScreenScaleType, getCurrentItem, setSpeed, getSpeed, duration, position, isFull, addDataAfter, insertDataBefore, showLabel, hideLabel, showVipView, hideVipView, showFloatView, hideFloatView, getResourcePath} from "../../uni_modules/oxe-player";
    export default {
        data() {
            return {
            }
        },
        onLoad() {
             uni.setStorageSync('playMode', '0');//0 仿抖音滑动播放 1 超级播放器模式
        },
        onReady() {
            var ox = this.$refs['video'];
            if (ox != null) {
                 //ios 事件返回setCallback会报错 android正常
                (ox as OxePlayerElement).setCallback('getCallback');
                    this.getInitData(function (res) {
                    setVideoData(res);
              });
            }
        },
        methods: {
            handleEventData(result:Map<string,string>) {
                 let respose = result['result'] as string;
                 let ee = JSON.parse(respose) as UTSJSONObject;
                 let code = ee["code"];
                 if (code == 0) {
                     clean();
                      uni.navigateBack({
                              delta: 1,
                              animationType: 'pop-out',
                              animationDuration: 200
                      });
                  } else {
                        if (code != 1) {
                          console.log(respose);
                        }
                  }
                  点播播放器事件
                  //0 小屏状态下返回按钮点击 
                            //1 播放进度实时返回position 
                            //2 视频广告点击事件
                            //3 暂停广告点击事件
                            //4 vip点击返回 
                            //5 弹幕开启状态 
                            //6 播放 
                            //7 暂停 
                            //8 缓冲返回 
                            //9 网络错误 
                            //10 钢笔图标点击
                            //11 选集点击事件
                            //12 广告详情按钮点击
                            //13 大小屏切换事件
                            //14 广告划过事件
                            //15 广告倒计时点击事件
                            //16 广告播放完成事件
                            //17 播放完成事件
                            //18 下一集事件
                            //20 准备播放
                            //27 清晰度 返回
                            //24 小屏关闭事件
                            //25 小屏恢复事件
                    滑动播放事件

                              //  0 小屏状态下返回按钮点击 
                              //  1 右滑结束(android有效)
                              //  2 单击
                              //  3 双击
                              //  4 滑到最后一个视频返回
                              //  5 播放记录返回index滚动到播放记录索引
                              //  6 播放 
                              //  7 暂停 
                              //  8 准备播放返回 
                              //  9 网络错误
                              //  10 播放完成
                              //  11 长按事件 
                              //  12 右滑返回坐标与状态
                              //  13 左滑返回坐标与状态
                              //  14 下拉刷新返回
                              //  15 上拉刷新返回
                              //  16 progress播放进度
                              //  17 缓冲
                              //  18 连接失败

             }
        }
    }
</script>

<style>

</style>

setCallback

设置全局事件监听返回

示例代码

(ox as OxePlayerElement).setCallback('getCallback');

handleEventData 内返回事件code

setVideoData

设置初始化数据

示例代码

格式请参考示例代码
let initData = {
    "appId": "__UNI__6F28561",
    "selectAutoPlay": true, //选集点击是否自动播放 默认自动播放
    "forceDeviceOrientation": false, //旋转方向 true 全屏视频不旋转
    "isLive": false,
    "showBottomProcess": true,
    "autoPlay": true, //默认false
    "openCache": true, //是否开启缓存
    "coreType":0,
    "fullGestureSlide": true,
    "smallGestureSlide": true,
    "isDrag": true, //进度条条是否拖动
    "showBack": true, //返回按钮是否显示小屏幕
    "showSelect": true, //选集按钮是否显示
    "showSpeed": true, //倍速按钮是否显示
    "showShot": true, //截图按钮是否显示
    "hideControl": false, //是否隐藏所有控件
    "loop": false, //是否单急循环
    "styles": styles,
    "radius": 0, //圆角大小 默认 0 没有圆角
    "index": 0,
    "startIcon":getResourcePath("/static/play.png"),
    "backgroundHolder": getResourcePath("/static/holder.gif"),//视频背景图片支持http
    "failImageUrl": getResourcePath("/static/holder.gif"),//加载失败动画支持http
    "backgroundAlpha": 1, //0 背景透明度
    "showDlna": {
        "small": true,
        "full": true
    }, //投屏按钮是否显示
    "showDunmaku": {
        "small": true,
        "full": true
    }, //弹幕按钮是否显示
    "showMore": {
        "small": true,
        "full": true
    }, //跟多按钮是否显示
    "ad": {
        "isShow": false,
        "url": "http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&f=JPEG?w=1280&h=853",
        "skipUrl": "http://wap.hao123.com"
    }, //中间暂停广告，为空则不播放广告
    "vad": {
        "isShow": false,
        "isShowSkip": true,
        "type": "image",
        "duration": 10,
        "url": "https://cms-bucket.nosdn.127.net/eb411c2810f04ffa8aaafc42052b233820180418095416.jpeg",
        "skipUrl": "http://wap.hao123.com"
    }, //播放前视频广告 
    "data": [{
        "uid": "", //扩展字段 用户id(可选，会随事件返回)
        "vid": "", //扩展字段 视频id(可选，会随事件返回)
        "title": "第一集",
        "index": "01",
        "thumb": "/static/cover.jpg",
        "url": "https://www.douyin.com/aweme/v1/play/?video_id=v0200fg10000co0bt3vog65v3t5ere80&line=0&file_id=66f4e32e228b4ec9a78c899c68bf7bcd&sign=81796b235eb8190a22aa11c881ce3eeb&is_play_url=1&source=PackSourceEnum_AWEME_DETAIL"
    },
    {
        "uid": "", //扩展字段 用户id(可选，会随事件返回)
        "vid": "", //扩展字段 视频id(可选，会随事件返回)
        "title": "第二集",
        "index": "02",
        "thumb": "/static/cover.jpg",
        "url": "https://www.douyin.com/aweme/v1/play/?video_id=v0200fg10000co0bt3vog65v3t5ere80&line=0&file_id=66f4e32e228b4ec9a78c899c68bf7bcd&sign=81796b235eb8190a22aa11c881ce3eeb&is_play_url=1&source=PackSourceEnum_AWEME_DETAIL",
    },
    {
        "uid": "", //扩展字段 用户id(可选，会随事件返回)
        "vid": "", //扩展字段 视频id(可选，会随事件返回)
        "title": "第三集",
        "index": "03",
        "thumb": "/static/cover.jpg",
        "url": "https://www.douyin.com/aweme/v1/play/?video_id=v0200fg10000co0bt3vog65v3t5ere80&line=0&file_id=66f4e32e228b4ec9a78c899c68bf7bcd&sign=81796b235eb8190a22aa11c881ce3eeb&is_play_url=1&source=PackSourceEnum_AWEME_DETAIL",
    }]
};
setVideoData(JSON.stringify(initData));

start

开始播放

示例代码

start();

pause

暂停播放

示例代码

pause();

resume

恢复播放

示例代码

pause();

next

播放器下一集

示例代码

next();

prev

播放器上一集

示例代码

prev();

replay

重新播放

示例代码

replay();

playIndex

播放索引视频

示例代码

playIndex(1);

openDanmaku

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

示例代码

openDanmaku();

closeDanmaku

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

示例代码

closeDanmaku();

clearDanmaku

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

示例代码

clearDanmaku();

addDanmaku

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

示例代码

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

addDanmakus

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

示例代码

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

enterFullScreen

进入全屏播放模式

示例代码

enterFullScreen();

exitFullScreen

退出全屏播放模式

示例代码

exitFullScreen();

clean

销毁视频播放器 两种播放模式都可用

示例代码

clean();

addComponent

添加自定义控件 两种播放模式都可用

示例代码

点播type类型有 select:选集 speed:倍速 more:更多 full:全屏 small:小屏 滑动播放有 share comment like component等
let component = {
    'x': x,
    'y': y,
    'w': 60,
    'h': 30,
    'type': 'component',
    '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
    }]
};
addComponent(JSON.stringify(component));

updateComponent

更新自定义控件 两种播放模式都可用

示例代码

点播type类型有 select:选集 speed:倍速 more:更多 full:全屏 small:小屏 滑动播放有 share comment like component等
let component = {
    'x': x,
    'y': y,
    'w': 60,
    'h': 30,
    'type': 'component',
    '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
    }]
};
updateComponent(JSON.stringify(component));

updateDataAtIndex

更新自定位置视频数据 两种播放模式都可用

示例代码

let data = {
    'index': 1,
    'data': {
        'uid': '', //扩展字段 用户id(可选，会随事件返回)
        'vid': '', //扩展字段 视频id(可选，会随事件返回)
        'title': '第二集',
        'index': '02',
        'thumb': 'https://cms-bucket.nosdn.127.net/cb37178af1584c1588f4a01e5ecf323120180418133127.jpeg',
        'url': 'https://yldnjs.oss-cn-heyuan.aliyuncs.com/video/170445569408238.mp4',
    }
};
updateDataAtIndex(JSON.stringify(data));

addDataBefore

更新全部视频数据 两种播放模式都可用

示例代码

let data = {'data':[{
        'uid': '', //扩展字段 用户id(可选，会随事件返回)
        'vid': '', //扩展字段 视频id(可选，会随事件返回)
        'title': '第二集',
        'index': '02',
        'thumb': 'https://cms-bucket.nosdn.127.net/cb37178af1584c1588f4a01e5ecf323120180418133127.jpeg',
        'url': 'https://yldnjs.oss-cn-heyuan.aliyuncs.com/video/170445569408238.mp4',
    }]};
addDataBefore(JSON.stringify(data));

seekTo

滑动到自定位置 两种播放模式都可用

示例代码

seekTo(1000);

setMuted

设置静音 两种播放模式都可用

示例代码

setMuted(true);

setVolume

设置音量 两种播放模式都可用

示例代码

setVolume(1.0);

setScreenScaleType

设置视频自适应模式 两种播放模式都可用

示例代码

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

getCurrentItem

获取当前播放视频数据 两种播放模式都可用

示例代码

let item = getCurrentItem();

setSpeed

设置倍速 两种播放模式都可用

示例代码

setSpeed(1.0);

getSpeed

获取视频倍速 两种播放模式都可用

示例代码

let speed = getSpeed();

showLabel

显示面板 点播播放模式都可用

示例代码

//0 选集面板 1 倍速面板 2 清晰度 3 更多 4 dlna面板
showLabel(1);

hideLabel

隐藏面板 点播播放模式都可用

示例代码

//0 选集面板 1 倍速面板 2 清晰度 3 更多 4 dlna面板
hideLabel(1);

isFull

是否全屏 点播播放模式都可用

示例代码

let isFull = isFull();

stopFresh

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

示例代码

stopFresh();

duration

获取播放总时长 毫秒 两种播放模式都可用

示例代码

let duration = duration();

position

获取播放位置 毫秒 两种播放模式都可用

示例代码

let position = position();

addDataAfter

追加一组视频数据 两种播放模式都可用

示例代码

let data = {'data':[{
        'uid': '', //扩展字段 用户id(可选，会随事件返回)
        'vid': '', //扩展字段 视频id(可选，会随事件返回)
        'title': '第二集',
        'index': '02',
        'thumb': 'https://cms-bucket.nosdn.127.net/cb37178af1584c1588f4a01e5ecf323120180418133127.jpeg',
        'url': 'https://yldnjs.oss-cn-heyuan.aliyuncs.com/video/170445569408238.mp4',
    }]};
addDataAfter(JSON.stringify(data));

insertDataBefore

往前面追加一组视频数据 两种播放模式都可用

示例代码

let data = {
        'uid': '', //扩展字段 用户id(可选，会随事件返回)
        'vid': '', //扩展字段 视频id(可选，会随事件返回)
        'title': '第二集',
        'index': '02',
        'thumb': 'https://cms-bucket.nosdn.127.net/cb37178af1584c1588f4a01e5ecf323120180418133127.jpeg',
        'url': 'https://yldnjs.oss-cn-heyuan.aliyuncs.com/video/170445569408238.mp4',
    };
insertDataBefore(JSON.stringify(data));

addStyle

添加自定义恐惧 全屏滑动播放可用

示例代码

let component = {
    'x': x,
    'y': y,
    'w': 60,
    'h': 30,
    'type': 'component',
    '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
    }]
};
addStyle(JSON.stringify(component));

upStyles

更新一组自定义控件 全屏滑动播放可用

示例代码

let components = {'data':{
    'x': x,
    'y': y,
    'w': 60,
    'h': 30,
    'type': 'component',
    '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
    }]
}};
addStyle(JSON.stringify(components));

updateUserInfo

更新用户控件 全屏滑动播放可用

示例代码

let userInfo = {
            "uid": 9,
            "userName": "openg_pongpong",
            "avatar": "https://p1-dy.byteimg.com/obj/2e041000706e748e808a1",
            "isLive": true,
            "isFocus": false,
            "likeNum": 1,
            "isLike": true,
            "commentNum": 0,
            "shareNum": 0,
            "musicId": 9,
            "musicName": "好啊油",
            "musicIcon": "https://p3-dy.byteimg.com/aweme/100x100/85e6001ea9360b6e1731.jpeg"
        }
    };
addStyle(JSON.stringify(userInfo));

hongbaoAction

控制红包状态 全屏滑动播放可用

示例代码

0 开始红包进度条 1停止 2显示 3隐藏
hongbaoAction(0);

setHBProgress

控制红包状态 全屏滑动播放可用

示例代码

红包进度
setHBProgress(100);

sendLiveGift

发送svga礼物 全屏滑动播放可用

示例代码

let data ={
    'avatar':'',
    'uid':'',
    'giftId':'',
    'giftImg':'',
    'giftSvga':'',
    'giftName':'',
    'num':10,
    'giftValue':50
};
sendLiveGift(JSON.stringify(data));

sendLiveMessage

发送s消息 全屏滑动播放可用

示例代码

let data ={
    'textColor':'',
    'type':'',
    'uid':'',
    'userMsg':'',
    'userName':''
};
sendLiveMessage(JSON.stringify(data));

sendLiveMembers

更新成员 全屏滑动播放可用

示例代码

let data ={
    'data':[{
        'uid':'',
        'avatar':'',
        'name':''}]
};
sendLiveMembers(JSON.stringify(data));

sendLiveDanmaku

发送弹幕 全屏滑动播放可用

示例代码

let data ={
    'uid':'',
    'avatar':'',
    'name':'',
    'content':''
};
sendLiveDanmaku(JSON.stringify(data));

closeGiftPanel

关闭礼物面板 全屏滑动播放可用

示例代码

红包进度
closeGiftPanel();

showLiveControlls

显示直播控件 全屏滑动播放可用

示例代码

红包进度
showLiveControlls();

hideLiveControlls

隐藏直播控件 全屏滑动播放可用

示例代码

红包进度
hideLiveControlls();

showVipView

显示vip面板 点播播放可用

示例代码

红包进度
showVipView();

hideVipView

隐藏vip面板 点播播放可用

示例代码

红包进度
hideVipView();

getResourcePath

获取资源路径 两种播放可用

示例代码

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

隐私、权限声明

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

无

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

无

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

无

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

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

加载更多...