更新记录

1.8.2(2023-04-04)

修复页面跳转下滑播放不了问题

1.8.1(2023-03-10)

处理与腾讯云直播pro插件冲突问题

1.8.0(2023-02-12)

封面问题修复

查看更多

平台兼容性

Android Android CPU类型 iOS
适用版本区间:4.4 - 11.0 armeabi-v7a:支持,arm64-v8a:支持,x86:支持 适用版本区间:9 - 14

原生插件通用使用流程:

  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原生插件配置”->”云端插件“列表中删除该插件重新选择


# 滑动视频插件


概述

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.仿抖音 music,share,comment,like,avatar,focus,title,userName,musicName,component 等自定义控件

插件集成准备事项

一,勾选官方videoPlayer Image text 二,试用 勾选云端插件: Image text 三,自定义基座: Image text 四,选定基座运行: Image text

播放器代码标签

  <oxVideo ref='video' 
      :loadGif='boxLoadGif' 
      :showLoad='boxShowLoad' 
      :isLive='boxIsLive' 
      :callback='boxCallback'
      :data='boxData' 
      :style='boxStyle'></oxVideo>

        boxStyle: { //样式 播放器 宽高
          'height': 0,
          'width': '750upx',
        },
        boxLoadGif:'',//加载动画
        boxShowLoad:false ,//加载动画是否显示
        boxIsLive:false ,//是否直播
        boxCallback:'actionCallback',//公用监听名称多个播放器是自定义
        boxData:test_data //初始化数据

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

监听事件

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

模块接口

initVideoData

初始化

var param = {
    index: 0,
    isDrag:false,//进度条拖动
    showSeekTime:false,//进度条时间显示
    //optionValues:[{category:0,key:'',value:''}],//ijk配置项,谨慎使用
    //optionIntValues:[{category:0,key:'',value:''}],//ijk配置项,谨慎使用
    components:[hongbao,com],// 控件 包括 红包 自定义控件 可选 不随屏滚动控件
    scaleMode:0,//0 :自动调节 默认  1自适应 2 全屏 有切边 3 全屏 android起作用 
    scrollType: 0, //滑动方向 0 上下滑动  1 左右滑动  默认 上下滑动 注意 开启左右滑动 前关闭左右滑动开关 ios 
    openCache: true, //是否开启缓存
    showBack: true, //返回按钮是否显示事件返回code:0滑动返回code:1android有效
    showShade:true,//头部 底部阴影 是否显示  默认显示
    rightSlide: true, //右滑禁止开关  code 12 监听互动x坐标 为正 浮点型
    leftSlide: true, //左滑禁止开关code 12 监听互动x坐标 为负 浮点型
    freshUp: true, //上拉刷新开关  code 15 
    freshDown: true, //下拉拉刷新开关code 14 
    showDoubleClick: true, //双击红心点赞事件返回code:3
    backgroundColor: '', //视频背景颜色
    backgroundHolder: 'static/background.png', //视频背景颜色
    playBtn: '', //中间播放按钮图片(自定义) 可选 没有则用系统自带
    marginBottom: 55, //进度条距离底部距离
    longClick: false, //11长按事件开关
    dat a: [{
      styles: styles,
      vid: 609,
      title: '相册的意义',
      url: 'http://xby01.oss-accelerate.aliyuncs.com/xby/images/-20200512-8383cb6737564fdb925c2de674ccf09b.mp4',
      thumb: 'http://xby01.oss-accelerate.aliyuncs.com/xby/images/-20200512-1c388395aa6b40f98c5ec46377c27a1a.file',
      userInfo: {
        avatar: 'http://xby01.oss-accelerate.aliyuncs.com/xby/images/-20200506-2039ab36a1c744b8bc8f81b2eff433bd.jpg',
        isLive: true,
        commentNum: 0,
        isFocus: false,
        isLike: false,
        likeNum: 2,
        shareNum: 0,
        uid: 1792,
        userName: '',
        musicId: 5572,
        musicName: '小霸王5.8L大容量家用多功能电饭煲',
        musicIcon: 'http://xby01.oss-accelerate.aliyuncs.com/xby/images/-20200506-2039ab36a1c744b8bc8f81b2eff433bd.jpg'
        }
      }]
    };
var ox = this.$refs.video;
ox.initVideoData(param);

addCacheDatas

提前缓存 封面 短视频

const ox = uni.requireNativePlugin('Jiang-OxPlayer');//注意 获取 ox对象要用 requireNativePlugin

ox.addCacheDatas([{
      url: 'http://xby01.oss-accelerate.aliyuncs.com/xby/images/-20200512-8383cb6737564fdb925c2de674ccf09b.mp4',
      thumb: 'http://xby01.oss-accelerate.aliyuncs.com/xby/images/-20200512-1c388395aa6b40f98c5ec46377c27a1a.file'
      }]);//提前缓存 封面 短视频

sendLiveGift

发送礼物

var param = {
               uid:'',//用户id
               name:'oxPlayer',//用户名
               avatar:'',//用户头像
               giftId:'G01',//礼物id
               giftName:'鲜花',//礼物名称
               giftImg:'widget://gift/yipitiezhi001.png',//礼物小图标
               giftSvga:'widget://svga/001.svga',//礼物svga动画 同时支持gif
               giftValue:10,//礼物价值
               num:10//数量
            };

var ox = this.$refs.video;
ox.sendLiveGift(param);

sendLiveMessage

发送滚动消息


 var htmltext = "<div>"+
                                  "<font face='微软雅黑' size='4' color='#3333FF'>西安科技大学高新学院</font>"+
                                  "<img src='https://scpic.chinaz.net/files/pic/pic9/202008/bpic20921.jpg' width='20px' height='20px' />"+
                                  "<font face='微软雅黑' size='4' color='#3333FF'>西安科技大学高新学院35544554</font>"+
                                  "<img src='https://scpic.chinaz.net/files/pic/pic9/202001/zzpic22406.jpg' width='20px' height='20px' />"+
                                  "</div>";
var param = {
               type:3,//1 系统消息 2 自己的消息 3 其他人消息 4 html标签 userMsg用html标签
               uid:'',
               userName:'潮汕小丸子',
               userMsg:'示例内容11112222222222222f',
               icon:'widget://image/icon_message.png',
               textColor:'#FFFFFF'
            };

var oxePlayer = api.require('oxePlayer');
oxePlayer.sendLiveMessage(param );

sendLiveMembers

更新成员列表

var param =[ {
             uid: '9',
        avatar: 'http://qiniu2.svideo.suxiangw.com/images/qiniu___6b9beb72204bf8b4b55cfdc9131658c0?imageView2/1/w/100/h/100/format/jpg',
        name: '潮汕小丸子'
            }];

var ox = this.$refs.video;
ox.sendLiveMembers(param );

sendLiveDanmaku

发送弹窗

var param = {
             avatar:'http://qiniu2.svideo.suxiangw.com/images/qiniu___6b9beb72204bf8b4b55cfdc9131658c0?imageView2/1/w/100/h/100/format/jpg',
              name:'潮汕小丸子',
              uid:'55222',
              content:'示例内容11112222222222222'
            };

var ox = this.$refs.video;
ox.sendLiveDanmaku(param );

addDataAfter

dbPlay接口播放最后一个视频时 追加 数据

addDataAfter({{dat a:params}})

params

       let params = {[   
              styles: styles,
              vid: 668,
              title: '搞笑视频',
              url: 'http://xby01.oss-accelerate.aliyuncs.com/xby/images/-20200512-fce20497e31e4c93830c5c93751949ed.mp4',
              thumb: 'http://xby01.oss-accelerate.aliyuncs.com/xby/images/-20200512-0cf654f856cb4cad90280b2de0cbd5b1.file',
              userInfo: {
                avatar: 'http://xby01.oss-accelerate.aliyuncs.com/xby/images/-20191231-50ae91092d2745bfb26937ba28c47906.jpg',
                commentNum: 0,
                isFocus: false,
                isLike: false,
                likeNum: 1,
                shareNum: 0,
                uid: 6908,
                userName: '重庆创享美科技',
                musicId: 5449,
                musicName: '泊蝶护手霜 5支装 功能各不同',
                musicIcon: 'http://xby01.oss-accelerate.aliyuncs.com/xby/images/-20191231-50ae91092d2745bfb26937ba28c47906.jpg'
              }
        ]};

示例代码

var ox = this.$refs.video;
ox.addDataAfter({dat a:params});

addDataBefore

下拉刷新数据

addDataBefore({dat a:params})

params

       let params = {[   
              styles: styles,
              vid: 668,
              title: '搞笑视频',
              url: 'http://xby01.oss-accelerate.aliyuncs.com/xby/images/-20200512-fce20497e31e4c93830c5c93751949ed.mp4',
              thumb: 'http://xby01.oss-accelerate.aliyuncs.com/xby/images/-20200512-0cf654f856cb4cad90280b2de0cbd5b1.file',
              userInfo: {
                avatar: 'http://xby01.oss-accelerate.aliyuncs.com/xby/images/-20191231-50ae91092d2745bfb26937ba28c47906.jpg',
                commentNum: 0,
                isFocus: false,
                isLike: false,
                likeNum: 1,
                shareNum: 0,
                uid: 6908,
                userName: '重庆创享美科技',
                musicId: 5449,
                musicName: '泊蝶护手霜 5支装 功能各不同',
                musicIcon: 'http://xby01.oss-accelerate.aliyuncs.com/xby/images/-20191231-50ae91092d2745bfb26937ba28c47906.jpg'
              }
        ]};

示例代码

var ox = this.$refs.video;
ox.addDataBefore(

{dat a:[{
           userInfo:{uid:'100000',nickName:'蒋小鱼',avatar:'https://p9-dy.byteimg.com/aweme/100x100/bdf80017d3278f461445.jpeg',isFocus:false
           ,likeNum:10,isLike:false,commentNum:20,shareNum:30},//用户信息 给各控件赋值
           music:{musicId:'',musicName:'长江新闻号',musicIcon:'https://p3-dy.byteimg.com/aweme/100x100/2e5370002d388bce37cb8.jpeg'},
           vid:'5252d',//视频id
           title:'百无一用是深情,最不屑一顾是相思',//视屏简介
           thumb:'http://qiniu2.svideo.suxiangw.com/images/qiniu___c5bf3477676229a06dc8b2359824763a',//视频封面
           url:'http://qiniu2.svideo.suxiangw.com/qiniu___637d85a47243ea6855ef462d6333e485'//视频地址
           }
        ]}

);

addComponent

动态 添加控件 不随屏幕滚动控件

addComponent({param})

params

       //数据格式 vid:视频id
        //radius 圆角值 backgroundColor 背景色 border 边框 borderColor边框颜色 
        //alignment 文字对齐0:居中 1上左对齐 2上中对齐 3上右对齐 4上两端对齐 5下左对齐 6下中对齐 7下右对齐 8下两端对齐 9居中两端对齐
        //textSize:14  文字大小 textColor:'#C0FF3E' 文字颜色 alpha 背景透明度
        //hidden 是否隐藏  processColor 进度条颜色(需要进度条添加)
        //code:16//控件标识  同时作为点击事件返回码 0,1,2,3,4,5占用 不能使用 组件 code值不能重复 rect 图片位置(相对父组件component位置)
       var component = {type:'component',x:w-300,y:280,w:100,h:100,pic:'/image/icon_music_cover.png',
        rect:{x:0,y:0,w:100,h:100},radius:50,backgroundColor:'#EE0000',
        alpha:0.5,border:1,borderColor:'#E066FF',text:'',
        animation:0,//隐藏 显示 动画起作用 0正常 1左 2右 3上 4下
        textSize:14,textColor:'#C0FF3E',alignment:6,processColor:'#FF0000',code:31,hidden:false};      

示例代码

var ox = this.$refs.video;
ox.addComponent(component}

updateComponent

动态更新组件 不随屏幕滚动控件

updateComponent(component);

示例代码

var ox = this.$refs.video;
ox.updateComponent(component);

addStyle

动态 添加控件 随屏幕滚动控件

addStyle({param})

params

       //数据格式 vid:视频id
        //radius 圆角值 backgroundColor 背景色 border 边框 borderColor边框颜色 scroll 是否随视频滚动
        //alignment 文字对齐0:居中 1上左对齐 2上中对齐 3上右对齐 4上两端对齐 5下左对齐 6下中对齐 7下右对齐 8下两端对齐 9居中两端对齐
        //textSize:14  文字大小 textColor:'#C0FF3E' 文字颜色 alpha 背景透明度
        //hidden 是否隐藏  processColor 进度条颜色(需要进度条添加)
        //code:16//控件标识  同时作为点击事件返回码 0,1,2,3,4,5占用 不能使用 组件 code值不能重复 rect 图片位置(相对父组件component位置)
       var style = {
            type: 'component',
            x: 10,
            y: h - 45,
            w: w - 20,
            h: 40,
            radius: 10,
            backgroundColor: '#000000',
            alpha: 0.1,
            border: 0,
            borderColor: '#01000000',
            code: 27,
            hidden: false,
            animation:0,//隐藏 显示 动画起作用 0正常 1左 2右 3上 4下
            pics:[{path:'widget://image/pan.png',x:10,y:10,w:20,h:20,code:271}],
            texts:[{x:0,y:0,w:120,h:40,text:'说点什么',textSize:14,textColor:'#C0FF3E',alignment:0,code:272};

示例代码

var ox = this.$refs.video;
ox.addStyle(style}

updateStyles

动态更新当前视频样式 随屏幕滚动控件 控件数组

updateStyles([styles]);

示例代码

var ox = this.$refs.video;
updateStyles([styles]);

updateUserInfo

动态更新视频用户信息 比如 评论数 分享数 等 更新

updateUserInfo({param})

params

        数据格式
       var userInfo={uid:'100201',userName:'长江新闻号adsf',
       avatar:'https://p9-dy.byteimg.com/aweme/100x100/bdf80017d3278f461445.jpeg',
       isFocus:true,likeNum:500,isLike:true,commentNum:500,shareNum:51250};

示例代码

var ox = this.$refs.video;
ox.updateUserInfo({uid:'100201',userName:'长江新闻号adsf',
       avatar:'https://p9-dy.byteimg.com/aweme/100x100/bdf80017d3278f461445.jpeg',
       isFocus:true,likeNum:500,isLike:true,commentNum:500,shareNum:51250});

红包操作

示例代码

//0 开始 1 暂停 2 显示 3 隐藏
var ox = this.$refs.video;
ox.hongbaoAcion({action:1});

播放下一条记录

示例代码

var ox = this.$refs.video;
ox.next();

prev

播放上一条记录

示例代码

var ox = this.$refs.video;
ox.prev();

playIndex

播放索引视频

示例代码

var ox = this.$refs.video;
ox.playIndex(2);

start

开始播放

示例代码

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

pause

停止播放

示例代码

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

replay

重新播放

示例代码

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

remove

移除播放器

示例代码

var ox = this.$refs.video;
ox.remove();

showPlay

显示播放器

showPlay()

示例代码

var ox = this.$refs.video;
ox.showPlay();

hidePlay

隐藏播放器

hidePlay()

示例代码

var ox = this.$refs.video;
ox.hidePlay();

clearCache

清理缓存

clearCache();

示例代码

const ox = uni.requireNativePlugin('Jiang-OxPlayer');//注意 获取 ox对象要用 requireNativePlugin
ox.clearCache();

stopFresh

停止刷新

stopFresh();

示例代码

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

setHBProgress

设置红包进度 code ==16 返回小视频播放进度 可调用此方法 进度1-100

var ox = this.$refs.video;
ox.setHBProgress(20);

hongbaoAction

控制红包

hongbaoAction({action:0}) //0 开始红包进度条 1停止 2显示 3隐藏

var ox = this.$refs.video;
ox.hongbaoAction({action:0});

duration

获取视频时长 毫秒

ox.duration(result => {
          let duration  = result.duration; 
        });

screenShot

截图 返回base64

ox.screenShot(result => {
          let base64  = result.base64; 
        });

__

getInfo

获取当前视频信息 返回 duration position item

ox.getInfo(result => {
          let duration  = result.duration; 
          let position  = result.position;
          let item  = result.item;
              });

控件 (直播控件 请参考 demo)

  let w = uni.getSystemInfoSync().windowWidth;
  let h = uni.getSystemInfoSync().windowHeight;
  let music, share, comment, like, avatar, focus, title, userName, musicName,ive_avatar, live_members, live_gift, live_danmaku, live_messages, hongbao, component;
  music = {
    type: 'music',
    x: w - 120,
    y: h - 120,
    w: 120,
    h: 80,
    pic: '',
    code: 16,
    hidden: false
  }; //旋转音乐
  share = {
    type: 'share',
    x: w - 60,
    y: h - 220,
    w: 40,
    h: 40,
    pic: '',
    code: 17,
    hidden: false,
    num: {
      hidden: false,
      textColor: '#C0FF3E',
      textSize: 12,
      x: w - 60,
      y: h - 180,
      w: 40,
      h: 40
    }
  }; //分享
  comment = {
    type: 'comment',
    x: w - 60,
    y: h - 320,
    w: 40,
    h: 40,
    pic: '',
    code: 18,
    hidden: false,
    num: {
      hidden: false,
      textColor: '#C0FF3E',
      textSize: 12,
      x: w - 60,
      y: h - 280,
      w: 40,
      h: 40
    }
  }; //评论
  like = {
    type: 'like',
    x: w - 60,
    y: h - 420,
    w: 40,
    h: 40,
    pic: '../../../static/logo.png',
    pic1: '../../../static/logo.png',
    code: 19,
    hidden: false,
    num: {
      hidden: false,
      textColor: '#C0FF3E',
      textSize: 12,
      x: w - 60,
      y: h - 380,
      w: 40,
      h: 40
    }
  }; //红心点赞
  avatar = {
    type: 'avatar',
    x: w - 65,
    y: h - 520,
    w: 50,
    h: 50,
    pic: '',
    radius: 25,
    code: 20,
    hidden: false
  }; //头像
  userName = {
    type: 'userName',
    x: 10,
    y: h - 190,
    w: 150,
    h: 40,
    textSize: 18,
    textColor: '#FFFFFF',
    code: 21,
    hidden: false
  }; //视频简介
  title = {
    type: 'title',
    x: 5,
    y: h - 150,
    w: w - 120,
    h: 60,
    code: 22,
    textSize: 16,
    textColor: '#FFFFFF',
    hidden: false
  }; //用户名
  musicName = {
    type: 'musicName',
    x: 30,
    y: h - 80,
    w: w - 130,
    h: 30,
    textSize: 16,
    textColor: '#C0FF3E',
    code: 23,
    hidden: false
  }; //头像
  focus = {
    type: 'focus',
    x: w - 55,
    y: h - 485,
    w: 30,
    h: 30,
    pic: '',
    code: 25,
    hidden: false
  }; //关注
  ive_avatar = {
    type: 'live_avatar',
    x: 10,
    y: 50,
    w: 140,
    h: 40,
    code: 18,
    focusCode: 19,
    hidden: false
  }; //头像 +积分+关注
  live_members = {
    type: 'live_members',
    x: 160,
    y: 50,
    w: w - 190,
    h: 40,
    code: 20,
    hidden: false
  }; //成员列表 
  live_gift = {
    type: 'live_gift',
    x: w - 150,
    y: h - 60,
    w: 40,
    h: 40,
    pic: '/static/icon_gift.png',
    gifts: gift, //支持 gif svga格式
    code: 21,
    hidden: false
  }; //礼物按钮 最多24个
  live_danmaku = {
    type: 'live_danmaku',
    x: 0,
    y: 120,
    w: w,
    h: 120,
    code: 28,
    hidden: false
  }; //弹幕
  live_messages = {
    type: 'live_messages',
    x: 10,
    y: 420,
    w: w - 100,
    h: h - 500,
    code: 22,
    hidden: false
  }; //滚动消息
  //自定义组件
 component = {
    type: 'component',
    x: 10,
    y: h - 45,
    w: w - 20,
    h: 40,
    radius: 10,
    backgroundColor: '#000000',
    alpha: 0.1,
    border: 0,
    borderColor: '#01000000',
    code: 27,
    hidden: false,
    animation:0,//隐藏 显示 动画起作用 0正常 1左 2右 3上 4下
    pics: [{
      path: '/static/pan.png',
      x: 10,
      y: 10,
      w: 20,
      h: 20,
      scaleType:0,//0图片自适应 1 图片撑满 xywh
      radius:0,//圆角
      code: 271
    }],
    texts: [{
      x: 0,
      y: 0,
      w: 120,
      h: 40,
      text: '说点什么...',
      textSize: 14,
      textColor: '#FFFFFF',
      alignment: 0,
      code: 272
    }]

  let hongbao = {
                type:'hongbao',
                  x: w - 65,
                  y: 120,
                  w: 50,
                  h: 50,
                  pic:'',//红包图片
                  time:20,//旋转一周时长
                  code: 55,//点击事件返回code
                  finishCode: 56,//结束事件返回code
                  hidden: false
              }
  //scaleType:0,//0图片自适应 1 图片撑满 xywh  radius:0,//圆角  
   //alignment 文字对齐0:居中 1上左对齐 2上中对齐 3上右对齐 4上两端对齐 5下左对齐 6下中对齐 7下右对齐 8下两端对齐 9居中两端对齐        
  let component = {
            type: 'component',
            x: 10,
            y: h - 45,
            w: w - 20,
            h: 40,
            radius: 10,
            backgroundColor: '#000000',
            alpha: 0.1,
            border: 0,
            borderColor: '#01000000',
            code: 27,
            hidden: false,
            animation:0,//隐藏 显示 动画起作用 0正常 1左 2右 3上 4下
            pics:[{path:'widget://image/pan.png',x:10,y:10,w:20,h:20,scaleType:0,radius:0,code:271}],
            texts:[{x:0,y:0,w:120,h:40,text:'说点什么',textSize:14,textColor:'#C0FF3E',alignment:0,code:272}]   

隐私、权限声明

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

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

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

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