更新记录
1.9.1(2024-06-24)
ios 内核完善
1.9.0(2024-06-17)
IJK内核调整
1.8.9(2024-06-05)
兼容超级播放器
查看更多平台兼容性
Android | Android CPU类型 | iOS |
---|---|---|
适用版本区间:5.0 - 14.0 | armeabi-v7a:支持,arm64-v8a:支持,x86:支持 | 适用版本区间:9 - 17 |
原生插件通用使用流程:
- 购买插件,选择该插件绑定的项目。
- 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
- 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
- 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
- 开发完毕后正式云打包
付费原生插件目前不支持离线打包。
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 二,试用 勾选云端插件: 三,自定义基座: 四,选定基座运行:
播放器代码标签
<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}]