更新记录

0.0.7(2019-09-27)

1.Android增加对物理返回键的监听,全屏状态下会自动返回小屏;

2.Android处理退出页面后报 Failed to receiveTasks 的问题

0.0.6(2019-09-02)

重要

官方最近将iOS端播放器内核也更新成了ijkplayer,为了减少插件包体积,并且跟官方的视频播放能力保持一致,新版本调整为复用官方播放器内核。故在打包自定义基座时,请勾选上官方的videoPlayer模块,不然会打包失败,尤其是之前使用过老版本,在升级时,务必注意这点!!!

更新日志

  • 1.修复autoPlay为false时,iOS不显示开始播放按钮的问题
  • 2.iOS增加小窗状态时,不捕获手势的设置(disablePanGesture),避免视频列表无法滚动
  • 3.iOS增加退出全屏方法quitFullScreen()
  • 4.增加单视频播放模式,该模式下支持播放本地视频(m3u8不支持),播放前需要使用plus.io.convertLocalFileSystemURL方法获得文件真实路径
  • 5.增加hidePlaybackRate设置,可隐藏倍速显示
查看更多

原生插件通用使用流程:

  1. 购买插件,选择该插件绑定的项目。
  2. 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
  4. 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://ask.dcloud.net.cn/article/35763
iOS 离线打包原生插件另见文档 https://ask.dcloud.net.cn/article/35764


一款支持在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"
            @onSeekComplete="onSeekComplete"
            @=""
            @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>
  
    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) {
                this.text = parseInt(p.percent * 100) + '%'
                this.currentTime = p.currentTime;
                this.duration = p.duration;
            },
            () {
                this.status = '正在播放'
            },
            onPrepared() {
                this.status = '准备播放'
            },
            () {
                this.status = '暂停'
            },
            onCompletion() {
                this.status = '播放结束'
            },
            onSeekComplete() {
                this.status = '跳转结束'
            },
            () {
                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();
        }
    }
  

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

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

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

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