更新记录

1.0.0（2024-10-16）

超级播放器1.0.0版本发布

平台兼容性

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>
    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) {
                    (ox as OxePlayerElement).setVideoData(res);
              });
            }
        },
        methods: {
            handleEventData(result:Map<string,string>) {
                 var ox = this.$refs['video'];
                 let respose = result['result'] as string;
                 let ee = JSON.parse(respose) as UTSJSONObject;
                 let code = ee["code"];
                 if (code == 0) {
                     (ox as OxePlayerElement).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

设置初始化数据

示例代码

格式请参考示例代码
(ox as OxePlayerElement).setVideoData('');

setVideoData

设置初始化数据

示例代码

格式请参考示例代码
(ox as OxePlayerElement).setVideoData('');

start

开始播放

示例代码

(ox as OxePlayerElement).start();

pause

暂停播放

示例代码

(ox as OxePlayerElement).pause();

resume

恢复播放

示例代码

(ox as OxePlayerElement).pause();

next

播放器下一集

示例代码

(ox as OxePlayerElement).next();

prev

播放器上一集

示例代码

(ox as OxePlayerElement).prev();

replay

重新播放

示例代码

(ox as OxePlayerElement).replay();

playIndex

播放索引视频

示例代码

(ox as OxePlayerElement).playIndex(1);

openDanmaku

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

示例代码

(ox as OxePlayerElement).openDanmaku();

closeDanmaku

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

示例代码

(ox as OxePlayerElement).closeDanmaku();

clearDanmaku

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

示例代码

(ox as OxePlayerElement).clearDanmaku();

addDanmaku

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

示例代码

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

addDanmakus

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

示例代码

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

enterFullScreen

进入全屏播放模式

示例代码

(ox as OxePlayerElement).enterFullScreen();

exitFullScreen

退出全屏播放模式

示例代码

(ox as OxePlayerElement).exitFullScreen();

clean

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

示例代码

(ox as OxePlayerElement).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': ox.getResourcePath('/static/vip.png'),//支持http
        'x': 35,
        'y': 0,
        'w': 25,
        'h': 12,
        'code': pcode
    }]
};
(ox as OxePlayerElement).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': ox.getResourcePath('/static/vip.png'),//支持http
        'x': 35,
        'y': 0,
        'w': 25,
        'h': 12,
        'code': pcode
    }]
};
(ox as OxePlayerElement).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',
    }
};
(ox as OxePlayerElement).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',
    }]};
(ox as OxePlayerElement).addDataBefore(JSON.stringify(data));

seekTo

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

示例代码

(ox as OxePlayerElement).seekTo(1000);

setMuted

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

示例代码

(ox as OxePlayerElement).setMuted(true);

setVolume

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

示例代码

(ox as OxePlayerElement).setVolume(1.0);

setScreenScaleType

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

示例代码

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

getCurrentItem

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

示例代码

(ox as OxePlayerElement).getCurrentItem();

setSpeed

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

示例代码

(ox as OxePlayerElement).setSpeed(1.0);

getSpeed

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

示例代码

let speed = (ox as OxePlayerElement).getSpeed();

showLabel

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

示例代码

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

hideLabel

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

示例代码

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

isFull

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

示例代码

let isFull = (ox as OxePlayerElement).isFull();

stopFresh

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

示例代码

ox as OxePlayerElement).stopFresh();

duration

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

示例代码

let duration = (ox as OxePlayerElement).duration();

position

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

示例代码

let position = (ox as OxePlayerElement).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',
    }]};
(ox as OxePlayerElement).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',
    };
(ox as OxePlayerElement).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': ox.getResourcePath('/static/vip.png'),//支持http
        'x': 35,
        'y': 0,
        'w': 25,
        'h': 12,
        'code': pcode
    }]
};
(ox as OxePlayerElement).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': ox.getResourcePath('/static/vip.png'),//支持http
        'x': 35,
        'y': 0,
        'w': 25,
        'h': 12,
        'code': pcode
    }]
}};
(ox as OxePlayerElement).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"
        }
    };
(ox as OxePlayerElement).addStyle(JSON.stringify(userInfo));

hongbaoAction

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

示例代码

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

setHBProgress

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

示例代码

红包进度
(ox as OxePlayerElement).setHBProgress(100);

sendLiveGift

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

示例代码

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

sendLiveMessage

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

示例代码

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

sendLiveMembers

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

示例代码

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

sendLiveDanmaku

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

示例代码

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

closeGiftPanel

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

示例代码

红包进度
(ox as OxePlayerElement).closeGiftPanel();

showLiveControlls

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

示例代码

红包进度
(ox as OxePlayerElement).showLiveControlls();

hideLiveControlls

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

示例代码

红包进度
(ox as OxePlayerElement).hideLiveControlls();

showVipView

显示vip面板 点播播放可用

示例代码

红包进度
(ox as OxePlayerElement).showVipView();

hideVipView

隐藏vip面板 点播播放可用

示例代码

红包进度
(ox as OxePlayerElement).hideVipView();

getResourcePath

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

示例代码

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