收藏人数:
购买（
试用
使用 HBuilderX 导入示例项目
赞赏（5）
更新记录
0.1.6（2020-11-24）
处理Android退出全屏后，页面被虚拟NavigationBar遮挡的问题
0.1.5（2020-07-27）
修复ipad下，退出全屏黑屏的问题
0.1.3（2020-07-17）
处理上个版本中播放结束后会闪退的问题
查看更多平台兼容性
| Android | Android CPU类型 | iOS |
|---|---|---|
| 适用版本区间：4.4 - 11.0 | armeabi-v7a：未测试，arm64-v8a：未测试，x86：未测试 | 适用版本区间：9 - 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原生插件配置”->”云端插件“列表中删除该插件重新选择
一款支持在nvue中使用的视频播放器，支持市面上主流视频格式与直播流，支持多清晰度切换与倍速。
- 支持设定默认清晰度,支持倍速播放；
- 支持屏幕滑动调节亮度、声音、播放进度；
- 提供多种播放器状态的回调；
- 在vue页面中使用，可以通过subnvue子窗体功能，将播放器置于页面上方；
- 请使用真机调试，模拟器可能无效。
重要更新
- 官方最近将iOS端播放器内核也更新成了ijkplayer(安卓版原来就是)，为了减少插件包体积，并且跟官方的视频播放能力保持一致，新版本调整为复用官方播放器内核。故在打包自定义基座时，请勾选上官方的videoPlayer模块，不然会打包失败，尤其是之前使用过老版本，在升级时，务必注意这点!!！
如果demo跑不起来，或提示方法不存在，请按照一下步骤检查:
- 1.在manifest中app原生插件配置中，添加云端插件，在App模块权限配置中勾选VideoPlayer；
- 2.打包自定义基座，等待基座下载完成；
- 3.运行前，在『运行基座选择』中选择『自定义基座』，然后再运行。
感激
感谢以下的项目,排名不分先后
代码示例
<template>
<div>
<xk-video
ref="video"
style="width:750px;height:422px;background-color: black"
title="我是测试的标题"
:srcList="srcList"
:playIndex="playIndex"
autoPlay="false"
disablePanGesture="false"
@onPlaying=""
@onStart="onStart"
@onPause="onPause"
@onPrepared="onPrepared"
@onCompletion="onCompletion"
@onSeekComplete="Complete"
@onError="onError"
@onFullScreen="onFullScreen"
@onNormalScreen="onNormalScreen">
</xk-video>
<div style="margin-top: 20px;width:750px;height:600px;align-items: center;justify-content: center">
<text>播放进度:{{text}}</text>
<text>当前位置:{{currentTime}}</text>
<text>总时长:{{duration}}</text>
<text style="margin-top: 20px">播放状态:{{status}}</text>
<text style="margin-top: 20px">窗口模式:{{mode}}</text>
<text @click="play" style="margin-top: 20px">播放</text>
<text @click="pause" style="margin-top: 20px">暂停</text>
<text @click="full" style="margin-top: 20px">全屏</text>
<text @click="unFull" style="margin-top: 20px">退出全屏</text>
<text @click="seek" style="margin-top: 20px">跳转30s</text>
<text @click="setParams" style="margin-top: 20px">切换视频源</text>
<text click="downloadVideo" style="margin-top: 20px">下载视频(HTML5+){{downloadStatus}}</text>
<!-- <text v-else>已存在本地视频文件</text> -->
<text @click="playLocalVideo" style="margin-top: 20px">测试播放本地视频</text>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
playIndex: 1,
src: 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/68e3febf4564972819220421305/v.f30.mp4',
srcList: [{
name: '标清',
url: 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f10.mp4'
}, {
name: '高清',
url: 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f20.mp4'
}, {
name: '超清',
url: 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f30.mp4'
}],
localVideoPath: '',
text: '',
currentTime: 0,
duration: 0,
status: '等待中',
mode: '普通',
downloadStatus:''
}
},
props: {},
methods: {
setParams() {
let srcList = [{
name: '标清',
url: 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/28742df34564972819219071568/v.f210.m3u8'
}, {
name: '高清',
url: 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/28742df34564972819219071568/v.f220.m3u8'
}, {
name: '超清',
url: 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/28742df34564972819219071568/v.f230.m3u8'
}];
let playIndex = 0;
let liveMode = "false";
let title = '新视频的标题';
this.$refs.video.setParams({
srcList: srcList,
playIndex: playIndex,
liveMode: liveMode,
title: title,
hidePlaybackRate:'true'
})
},
play() {
this.$refs.video.play()
},
pause() {
this.$refs.video.pause()
},
full() {
this.$refs.video.fullScreen()
},
unFull() {
this.$refs.video.quitFullScreen()
},
seek() {
this.$refs.video.seek(30000) //调转时间，单位毫秒
},
(p) {
let percent = p.percent || p.detail.percent;
this.text = parseInt(percent * 100) + '%'
this.currentTime = p.currentTime || p.detail.currentTime;
this.duration = p.duration || p.detail.duration ;
},
onStart() {
this.status = '正在播放'
},
onPrepared() {
this.status = '准备播放'
},
onPause() {
this.status = '暂停'
},
onCompletion() {
this.status = '播放结束'
},
Complete() {
this.status = '跳转结束'
},
onError() {
this.status = '播放错误'
},
onFullScreen() {
this.mode = '全屏';
plus.navigator.setFullscreen(true);
},
onNormalScreen() {
plus.navigator.setFullscreen(false);
setTimeout(() => {
this.mode = '普通'
}, 2000); //延迟2s执行以避免看不到状态切换
},
checkLocalFileExists() {
let filename = '_downloads/video.mp4'
plus.io.resolveLocalFileSystemURL(filename, (entry) => {
console.log('本地视频文件已存在');
this.localVideoPath = plus.io.convertLocalFileSystemURL(filename); //本地视频文件已存在,获取真实本地url路径
this.downloadStatus = '已下载'
}, (e) => {
//本地文件不存在
})
},
downloadVideo() {
let url = this.src;
let filename = '_downloads/video.mp4'
let dtask = plus.downloader.createDownload(url, {
filename: filename
});
this.downloadStatus = '下载中…';
dtask.addEventListener("statechanged", (download, status) => {
if (download.state == 4 && status == 200) {
uni.showToast({
title: '下载完成'
});
this.downloadStatus = '已下载'
this.localVideoPath = plus.io.convertLocalFileSystemURL(filename); //获取真实本地url路径
}
}, false);
dtask.start();
},
playLocalVideo() {
if (!this.localVideoPath) {
uni.showToast({
title: '缺少本地文件!'
});
return false
} else {
console.log('本地文件路径', this.localVideoPath);
}
this.$refs.video.setParams({
src: this.localVideoPath,
title: '本地视频'
})
}
},
mounted() {
this.checkLocalFileExists();
}
}
</script>
下载 5189
赞赏 5
下载 10005
赞赏 0
赞赏
京公网安备：11010802035340号