更新记录

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

原生插件通用使用流程:

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


一款支持在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"
            @="" 
            @=""
            @=""
            @onPrepared="onPrepared"
            @onCompletion="onCompletion"
            @Complete="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 ;
            },
            () {
                this.status = '正在播放'
            },
            onPrepared() {
                this.status = '准备播放'
            },
            () {
                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>

隐私、权限声明

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

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

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

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