更新记录

1.0.27(2023-04-21)

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

1.0.26(2023-04-14)

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

1.0.25(2022-11-16)

  1. 修复全局事件huaZhongHuaBack不生效问题,采用自定义会方式代替
查看更多

平台兼容性

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


前言

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

功能

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

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=2604797219,1573897854&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: 10000}) 快进到第几毫秒秒开始播放,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);
  • 投屏方案
  1. 在播放器界面上添加投屏按钮

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

@onMenuBtnClick="onMenuBtnClick"

            onMenuBtnClick: function(e){
                var btnIndex = e.detail.index;
                this.showMsg("点击了菜单按钮:" + btnIndex);
            }
  1. 集成视频屏幕投屏DLNA投屏插件 参考此插件API调用视频投屏接口

注意:uni-app 基座和SDK版本需要一致,不然iOS上自动横竖屏切换会出现错乱,请使用新版HBuild使用

支持定制,联系方式QQ252797991

如果觉得可以就点个👍吧,欢迎粉丝收藏,土豪打赏,您的关注就是我们创作的动力!

隐私、权限声明

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

android: "android.permission.READ_EXTERNAL_STORAGE", "android.permission.INTERNET", "android.permission.REORDER_TASKS", "android.permission.SYSTEM_ALERT_WINDOW" ios: 无

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

插件不采集任何数据

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

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