更新记录

1.0.0（2024-12-25）

uniapp,uniappx 兼容，虚拟机运行，打包大小不受限

平台兼容性

oxo-player

开发文档

模块概述

1.支持点播,直播

2.缓存,分集播放 支持 m3u8缓存

3.android 支持视频格式 m3u8,flv,mp4,webm,ts,mpd,mkv 支持rtmp直播

4.ios 支持视频格式 m3u8,flv,mp4,mov 支持rtmp直播

5.component 等自定义控件

<template>
    <oxo-player ref="video" style="width: 100%;height: 100%"></oxo-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";
import * as UTSPlayer from "../../uni_modules/oxe-player";
    export default {
        data() {
            return {
            }
        },

        onReady() {
           UTSPlayer.onCallback(function (res) {
               console.log(res);
               let ee = JSON.parse(res);
               let code = ee["code"];
               点播播放器事件
               //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 小屏恢复事件

           });
           this.getInitData(function (res) {
                  setTimeout(function () {
                      UTSPlayer.setVideoData(res);
                }, 1000);
            });
        },
        methods: {

        }
    }
</script>

<style>

</style>

onCallback

设置全局事件监听返回

示例代码

UTSPlayer.onCallback(function (res) {
let ee = JSON.parse(res);
               let code = ee["code"];
               点播播放器事件
               //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 小屏恢复事件

});

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",
    }]
};
UTSPlayer.setVideoData(JSON.stringify(initData));

start

开始播放

示例代码

UTSPlayer.start();

pause

暂停播放

示例代码

UTSPlayer.pause();

resume

恢复播放

示例代码

UTSPlayer.pause();

next

播放器下一集

示例代码

UTSPlayer.next();

prev

播放器上一集

示例代码

UTSPlayer.prev();

replay

重新播放

示例代码

UTSPlayer.replay();

playIndex

播放索引视频

示例代码

UTSPlayer.playIndex(1);

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));

enterFullScreen

进入全屏播放模式

示例代码

UTSPlayer.enterFullScreen();

exitFullScreen

退出全屏播放模式

示例代码

UTSPlayer.exitFullScreen();

clean

销毁视频播放器

示例代码

UTSPlayer.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
    }]
};
UTSPlayer.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
    }]
};
UTSPlayer.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',
    }
};
UTSPlayer.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',
    }]};
UTSPlayer.addDataBefore(JSON.stringify(data));

seekTo

滑动到自定位置

示例代码

UTSPlayer.seekTo(1000);

setMuted

设置静音

示例代码

UTSPlayer.setMuted(true);

setVolume

设置音量

示例代码

UTSPlayer.setVolume(1.0);

setScreenScaleType

设置视频自适应模式

示例代码

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

getCurrentItem

获取当前播放视频数据

示例代码

let item = UTSPlayer.getCurrentItem();

setSpeed

设置倍速

示例代码

UTSPlayer.setSpeed(1.0);

getSpeed

获取视频倍速

示例代码

let speed = UTSPlayer.getSpeed();

showLabel

显示面板

示例代码

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

hideLabel

隐藏面板

示例代码

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

isFull

是否全屏

示例代码

let isFull = UTSPlayer.isFull();

duration

获取播放总时长 毫秒

示例代码

let duration = UTSPlayer.UTSPlayer.duration();

position

获取播放位置 毫秒

示例代码

let position = UTSPlayer.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',
    }]};
UTSPlayer.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',
    };
UTSPlayer.insertDataBefore(JSON.stringify(data));

showVipView

显示vip面板

示例代码

红包进度
UTSPlayer.showVipView();

hideVipView

隐藏vip面板

示例代码

红包进度
UTSPlayer.hideVipView();

getResourcePath

获取资源路径

示例代码

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