视频播放器原生插件

更新记录

1.0.27（2023-04-21）

增加代码启动画中画小窗口功能this.$refs.videoPlayer.startPicInPic(params);

1.0.26（2023-04-14）

修复ios 16 自动旋转全屏问题

1.0.25（2022-11-16）

修复全局事件huaZhongHuaBack不生效问题，采用自定义会方式代替

平台兼容性

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

前言

wrs-videoplayer是一款支持Android、iOS视频播放的组件，支持视频格式有rtmp、m3u8、flv、mp4等常用视频格式，支持华丽弹幕

功能

支持自动选择全屏
暂停、播放、全屏、可拖动进度条,开始播放、播放进度、播放失败、播放结束、从第几秒开始播放
支持弹幕，弹幕支持图文混排
封面图片
支持悬浮小窗口画中画播放(ios受限于uniapp,退出本页面后小窗口会消失)
支持投屏

插件集成步骤请参考https://www.cnblogs.com/wenrisheng/p/

ios悬浮小窗口画中画功能需要增加audio的后台模式


{  
"app-plus" : {  
        /* 应用发布信息 */  
        "distribute" : {  
            /* ios打包配置 */  
            "ios" : {  
                "UIBackgroundModes" : [ "audio"] // 数组，支持多个  
            },  
         ...  
        }  
    }  
}

wrs-videoplayer组件

注意:不要勾选manifest.json的App模块配置里的VideoPlayer(视频播放)

    <wrs-videoplayer ref='videoPlayer' :style="'width:'+width+'px;height:'+height+'px;'"
            @onBarrageTypeChange="onBarrageTypeChange" @playerPrepareToPlay="playerPrepareToPlay"
            @playerReadyToPlay="playerReadyToPlay" @playerPlayTimeChanged="playerPlayTimeChanged"
            @playerPlayFailed="playerPlayFailed" @playerDidToEnd="playerDidToEnd"></wrs-videoplayer>

属性

@onBarrageTypeChange 用户选择弹幕改变的时候调用
@playerPrepareToPlay 预备播放
@playerReadyToPlay 准备播放
@playerPlayTimeChanged 播放进度
@playerPlayFailed 播放失败
@playerDidToEnd 播放结束
@onLoadView 加载组件，所有API调用需要在onLoadView中或之后才能调用
@onMenuBtnClick 监听菜单按钮点击事件
@onHuaZhongHuaClick 点击了画中画按钮

方法

设置配置


this.$refs.videoPlayer.setConfig({
                autoPlay: false, // 是否自动播放
                menus: ["barrage"] //工具栏菜单按钮，目前支持的变量有:barrage(弹幕按钮)
            });

设置视频播放URL

        this.$refs.videoPlayer.setPlayUrl({
            url: "http://las-tech.org.cn/kwai/las-test_ld500d.flv"
        });

设置播放器封面图片

        this.$refs.videoPlayer.setCoverImage({
            image: "https://t7.baidu.com/it/u=,&fm=193&f=GIF"
        });

this.$refs.videoPlayer.start() 开始播放
this.$refs.videoPlayer.pause() 暂停播放
this.$refs.videoPlayer.enterFullScreen() 进入全屏
this.$refs.videoPlayer.exitFullScreen() 退出全屏
this.$refs.videoPlayer.play({url:"xxx"}) 切换播放视频
this.$refs.videoPlayer.seekToTime({time: }) 快进到第几毫秒秒开始播放，time单位是毫秒
this.$refs.videoPlayer.setBarrageType({barrageType: "none"}) 获取弹幕类型 barrageType: none(关闭弹幕)、half(精简弹幕模式)、all(华丽弹幕模式)
this.$refs.videoPlayer.setBarrageType({barrageType: "none"}) 设置弹幕类型
this.$refs.videoPlayer.sendDanmu(options) 发送弹幕

弹幕参数options： direction: 弹幕方向，RL(右到左)、LR(左到右)、TB(上到下,仅支持iOS)、BT(下到上,仅支持iOS) texts: 弹幕文本图片，把texts数组的所有对象平成一条弹幕数据，每个对象的参数有： type: txt(文本)、image(图片) text: 文字 textColor: 文字颜色 textSize: 文字大小 bold: 是否是粗体 backgroundColor: 背景色 underline: 下划线 color 下划线颜色仅对iOS有效 strikethrough：删除线 color 删除线颜色仅对iOS有效 obliqueness：字形倾斜度, 正值右倾，负值左倾，iOS可以调节倾斜度，Android只能倾斜，无法调节倾斜度 stroke：笔画, 负值填充效果，正值中空效果，仅对iOS有效 shadow：阴影，仅对iOS有效

设置播放器内核

Android支持的内核有:IjkPlayerManager、SystemPlayerManager、Exo2PlayerManager iOS支持的内核有:IjkPlayerManager、AVPlayerManager 如果视频格式不支持，可以切换内核试下,例如flv、rtmp格式需要IjkPlayerManager内核(某些Android机器上使用Exo2PlayerManager内核才能播放rtmp)，加密key的m3u8需要Exo2PlayerManager、AVPlayerManager内核

var videoplayermgr = uni.requireNativePlugin("wrs-videoplayermgr");
        var params = {};
        params.playManager = "IjkPlayerManager";// 播放器内核，Android支持的内核有:IjkPlayerManager、SystemPlayerManager、Exo2PlayerManager，iOS支持的内核有:IjkPlayerManager、AVPlayerManager
        videoplayermgr.setPlayManager(params);

隐藏显示控制UI

                var params = {};
                params.hide = true;
                this.$refs.videoPlayer.hideControlBar(params);

设置悬浮小窗口画中画长宽比例，只对Android有效，iOS的长宽是系统默认的


            this.$refs.videoPlayer.setHuaZhongHuaRatio({
                ratio: 0.5625
            });

            // 或者
            this.$refs.videoPlayer.setHuaZhongHuaRatio({
                x: 20,
                y:20,
                width:20,
                height: 20
            });

代码启动画中画小窗口


var params = {};
// params.url = "http://asdfa/aa.mp4"; // url不传则取当前播放器的url
this.$refs.videoPlayer.startPicInPic(params);

投屏方案

在播放器界面上添加投屏按钮


this.$refs.videoPlayer.setConfig({
                menus: ["projection_screen"] //工具栏菜单按钮，目前支持的变量有:barrage(弹幕按钮)
            });

监听菜单按钮点击事件


@onMenuBtnClick="onMenuBtnClick"

            onMenuBtnClick: function(e){
                var btnIndex = e.detail.index;
                this.showMsg("点击了菜单按钮:" + btnIndex);
            }

集成视频屏幕投屏DLNA投屏插件参考此插件API调用视频投屏接口