更新记录
1.1.6(2021-02-18)
更新日志
1.添加Android和iOS的url解析视频播放
2.尝试修复存在问题
注:请不要使用主要项目升级插件,先进行测试,问题尽快反馈
1.1.5(2020-09-01)
更新日志,交流及问题反馈QQ群:609882821
1.修复安卓高版本播放m3u8视频闪退问题
2.更新播放器底层基座
1.1.4(2020-08-31)
更新日志,交流及问题反馈QQ群:609882821
1.修复反馈的安卓无法正常播放m3u8资源问题
2.优化安卓可能造成卡顿的隐患
3.优化播放器速度
查看更多平台兼容性
Android | Android CPU类型 | iOS |
---|---|---|
适用版本区间:4.4 - 11.0 | armeabi-v7a:支持,arm64-v8a:未测试,x86:未测试 | 适用版本区间:10 - 14 |
原生插件通用使用流程:
- 购买插件,选择该插件绑定的项目。
- 在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原生插件配置”->”云端插件“列表中删除该插件重新选择
JKJ-VideoView
简介
JKJ-VideoView插件致力于让开发者一键实现功能强大的播放器。
插件问题反馈交流群:609882821
插件使用前准备
一、选择试用插件
二、开启视频播放
三、添加权限
四、打包自定义基座
五、使用自定义基座运行
六、在nvue界面中添加播放器及引入插件
注:播放器必须在nvue界面使用,无法在vue界面使用!!!!
模块接口
setJsCallback
设置回调函数
//设置回调函数
videoView.setJsCallback(this.jsCallback);
this.jsCallback = function(res) {
if (res.type == "onStartFullScreenPlay") {
//开始全屏播放回调
} else if (res.type == "onStartFloatWindowPlay") {
//开始悬浮播放
} else if (res.type == "onStopFullScreenPlay") {
//退出全屏回调
} else if (res.type == "play_callback") {
//console.log("按钮回调输出",res.data.vod_id,that.qpdgjs)
} else if (res.type == "onclick") {
//所有点击回调
if(res.data.event == "sus_advert"){
//点击暂停广告回调
}else if(res.data.event == "Close_advert"){
//点击了关闭贴片广告按钮
var videoView = that.$refs.videoView1;
videoView.Close_tpadvert();
}else if(res.data.event == "Onclick_advert"){
//点击了贴片广告
}else if(res.data.event == "live_zt"){
//直播源控制双击暂停,请不要删除否则无法暂停视频
var videoView = that.$refs.videoView1;
videoView.pause();
}
} else if (res.type == "onPlayEvent") {
if (res.data.event == 2006) {
//console.log("播放结束");
} else if (res.data.event == 2004) {
//console.log("开始播放");
} else if (res.data.event == 2007) {
//console.log("加载中");
} else if (res.data.event == 2014) {
//console.log("加载完成");
} else if (res.data.event == 2013) {
//console.log("播放器已准备完成,可以播放");
} else if (res.data.event == 2005) {
//console.log("播放器进度");
//console.log(res.data);
}
}
}
play
视频播放接口
注:iOS中因为其底层加载逻辑此接口不能直接放在onLoad()事件中,具体使用方式请看下方iOS处理方式
//设置播放源开始播放
videoView.play(
[{
//appid:"1252463788",
title: 'mp4视频演示链接', //全屏视频标题
title1: 'mp4', //选集界面内容
// videoId:{
// fileId:'4564972819220421305'
// pSign:""
// },
url: 'http://200024424.vod.myqcloud.com/200024424_709ae516bdf811e6ad39991f76a4df69.f20.mp4',
qualityName: '原画',
multiURLs: [{
url: 'http://200024424.vod.myqcloud.com/200024424_709ae516bdf811e6ad39991f76a4df69.f20.mp4',
qualityName: '原画',
}, ]
}, {
//appid:"1252463788",
title: '直播演示链接',
title1: '直播',
// videoId:{
// fileId:'4564972819220421305'
// },
url: 'http://liteavapp.qcloud.com/live/liteavdemoplayerstreamid.flv',
qualityName: '高清',
multiURLs: [{
url: 'http://liteavapp.qcloud.com/live/liteavdemoplayerstreamid.flv',
qualityName: '原画',
}, ]
}],
0 //0表示播放第几个视频(不能超出上面的列表)
);
pause
暂停播放
this.$refs.videoView1.pause();
resume
恢复播放
this.$refs.videoView1.resume();
startDownloadUrl
视频下载接口
var downloadPath = "/"; //下载路径
var downloadUrl = "https://v1.szjal.cn/20190902/mE3vo0vA/index.m3u8"; //下载url
//下载文件
jkjsdkwx.startDownloadUrl(downloadPath, downloadUrl, function(res) {
console.log(res);
});
stopDownload
暂停下载
var downloadUrl = "https://v1.szjal.cn/20190902/mE3vo0vA/index.m3u8"; //下载url
jkjsdkwx.stopDownload(downloadUrl);
stopAllDownload
暂停所有下载
jkjsdkwx.stopAllDownload();
deleteDownloadFile
删除下载文件
var downloadPath = "/abc.m3u8"; //下载路径
jkjsdkwx.deleteDownloadFile(downloadPath);
seekTo
指定视频播放时间
var videoView = this.$refs.videoView1;
videoView.seekTo(25); //这个是int
addDanmaku
发送弹幕(单个)
var videoView = this.$refs.videoView1;
videoView.addDanmaku("弹幕1");
addDanmakus
发送弹幕(单个)
var videoView = this.$refs.videoView1;
videoView.addDanmakus(["弹幕1","弹幕2"]);
stopFullScreenPlay
退出全屏
var videoView = this.$refs.videoView1;
videoView.stopFullScreenPlay();
resetPlayer
销毁播放器
var videoView = this.$refs.videoView1;
videoView.resetPlayer();
setBrightness
设置屏幕亮度
var videoView = this.$refs.videoView1;
videoView.setBrightness(0.4);
getBrightness
获取屏幕亮度
var videoView = this.$refs.videoView1;
videoView.getBrightness();
setRenderRotation
设置画面旋转(非控件整体选择)
var videoView = this.$refs.videoView1;
videoView.setRenderRotation(90); //可选项:0,90,180,270
show_advert
设置贴片视频广告内容
var videoView = this.$refs.videoView1;
videoView.show_advert({
"tp_zt": 0, // 1:播放广告 0:不播放广告
"tp_url": "http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4", //支持格式:mp4,3GP
"tp_String": "开通VIP关闭广告" //视频右上角红色提示文字,可动态切换。
});
setadvert
设置暂停悬浮广告
var videoView = this.$refs.videoView1;
videoView.setadvert("http://www.baidu.com/upload/vod/20200109-1/aebc087d1c4d1fa1f3a55fe01f6072d7.jpg");
ychzh
移除安卓普通窗口画中画按钮
var videoView = this.$refs.videoView1;
videoView.ychzh(); //仅限安卓使用,iOS无此接口使用会报错
setScrollText
移除安卓普通窗口画中画按钮
var videoView = this.$refs.videoView1;
videoView.setScrollText("我是贴片滚动广告"); //内容不要过长
Close_tpadvert
关闭贴片广告
var videoView = this.$refs.videoView1;
videoView.Close_tpadvert();
onSwitchPlayMode
设置播放模式
var videoView = this.$refs.videoView1;
videoView.onSwitchPlayMode(0); //退出全屏及悬浮窗
cq_tpadvert
重新显示暂停广告
var videoView = this.$refs.videoView1;
videoView.cq_tpadvert(); //退出全屏及悬浮窗
IOS在onLoad()中实现自动播放
setJsCallback
控件初始化
<script>
var jkjsdkwx = uni.requireNativePlugin('JKJ-VideoView');
export default {
onLoad: function() {
jkjsdkwx.setJsCallback(this.jsCallback);
}
}
</script>
play
自动播放视频
onLoad(){
uni.request({
url:"http://127.0.0.1"
success:(res) => {
jkjsdkwx.play(
[{
//appid:"1252463788",
title: 'mp4视频演示链接', //全屏视频标题
title1: 'mp4', //选集界面内容
// videoId:{
// fileId:'4564972819220421305'
// pSign:""
// },
url: 'http://200024424.vod.myqcloud.com/200024424_709ae516bdf811e6ad39991f76a4df69.f20.mp4',
qualityName: '原画',
multiURLs: [{
url: 'http://200024424.vod.myqcloud.com/200024424_709ae516bdf811e6ad39991f76a4df69.f20.mp4',
qualityName: '原画',
}, ]
}, {
//appid:"1252463788",
title: '直播演示链接',
title1: '直播',
// videoId:{
// fileId:'4564972819220421305'
// },
url: 'http://liteavapp.qcloud.com/live/liteavdemoplayerstreamid.flv',
qualityName: '高清',
multiURLs: [{
url: 'http://liteavapp.qcloud.com/live/liteavdemoplayerstreamid.flv',
qualityName: '原画',
}, ]
}],
0 //0表示播放第几个视频(不能超出上面的列表)
);
}
})
}
show_advert
设置贴片视频广告内容
jkjsdkwx.show_advert({
"tp_zt": 0, // 1:播放广告 0:不播放广告
"tp_url": "http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4", //支持格式:mp4,3GP
"tp_String": "开通VIP关闭广告" //视频右上角红色提示文字,可动态切换。
});
setadvert
设置暂停悬浮广告
jkjsdkwx.setadvert("http://www.baidu.com/upload/vod/20200109-1/aebc087d1c4d1fa1f3a55fe01f6072d7.jpg");
播放器页面代码编写建议
onBackPress()
屏蔽返回按钮
onBackPress(e) {
if (e.from == 'backbutton') {
//voidl可以保持是全屏还是窗口,这里1代表全屏模式按下返回按钮,0表示窗口模式按下全屏按钮,播放状态可以从播放器回调中获取
if (this.voidl == 1) {
//console.log("退出全屏")
//退出全屏回调
var videoView = this.$refs.videoView1;
videoView.stopFullScreenPlay();
videoView.cq_tpadvert(); //重启显示暂停广告
return true; //阻止默认返回行为
} else {
uni.setKeepScreenOn({
keepScreenOn: false //关闭屏幕常亮
});
var videoView = this.$refs.videoView1;
videoView.onSwitchPlayMode(0);
videoView.cq_tpadvert();
videoView.resetPlayer();
uni.navigateBack({
delta: 1 //关闭当前界面,返回上一个界面
})
}
return true; //阻止默认返回行为
}
}
注:
经作者修改,插件内的亮度调节由原版的设置软件亮度改为设置系统亮度,并需要使用者申请setting权限及悬浮窗权限
<uses-permission android:name="android.permission.WRITE_SETTINGS" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
具体使用请下载示例项目查看