更新记录
6.1.1(2024-03-02)
- 新增屏幕管理功能 (内测);
6.1.0(2024-02-07)
- 新增V2版本播放器(内测);
6.0.1(2023-06-15)
- 修复旧版播放器无法使用bug;
平台兼容性
Android | Android CPU类型 | iOS |
---|---|---|
适用版本区间:4.4 - 14.0 | armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 | 适用版本区间:9 - 17 |
原生插件通用使用流程:
- 购买插件,选择该插件绑定的项目。
- 在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原生插件配置”->”云端插件“列表中删除该插件重新选择
腾讯云直播播放器
该模块可以实现腾讯云直播拉流播放,支持画面调整、播放控制、消息接收、屏幕截图、截流录制等。
接口模式(纯API)
扫描下方二维码,安装示例代码,快速体验插件功能:
Android | iOS | 联系我们 |
---|---|---|
扫码添加技术支持(微信号: ruanyunkeji006),开通测试账号。
技术支持
建议扫码添加我们技术支持,协助接入和测试。
联系我们 | 微信号 | 更多功能 |
---|---|---|
ruanyunkeji006 |
截留录制 清晰切换 直播时移 |
快速开始
步骤 1: 集成插件
插件名称: RY-TencentLivePlayer
- 加载插件
-
使用 自定义基座 ,引入插件;
-
新建nvue文件,该插件必须在nvue中使用。在使用前,需要先加载插件。
<RY-TencentLivePlayer ref="livePlayer" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentLivePlayer>
说明:
可以通过修改width和height参数值的大小,来修改视频容器的大小。
- 腾讯云配置
步骤 2: 开始使用插件
使用 init 函数可以初始化插件,需要经过初始化之后,才可以使用各个函数接口功能。
this.$refs.livePlayer.init({
docPath: plus.io.convertLocalFileSystemURL('_doc')
}, ret => {
console.log(ret);
});
步骤 3: 设置监听
初始化后,可以通过使用 setLivePlayerListener 来设置监听,监听直播播放器的回调事件。
this.$refs.livePlayer.setLivePlayerListener({}, ret => {
console.log(ret);
});
步骤 4: 启动播放
通过 startPlay 函数可以开启直播播放。
this.$refs.livePlayer.startPlay({
flvUrl: 'http://2157.liveplay.myqcloud.com/live/2157_xxxx.flv',
rect: {
x: 0,
y: 0,
w: self.playerWidth,
h: self.playerHeight
}
}, ret => {
console.log(ret);
});
播放协议 | 含义 |
---|---|
rtmpUrl | 传入的 URL 为 RTMP 直播地址 |
flvUrl | 传入的 URL 为 FLV 直播地址 |
rtmpUrl | 低延迟链路地址(仅适合于连麦场景) |
hlsUrl | 传入的 URL 为 HLS(m3u8) 播放地址 |
关于 HLS(m3u8)
在 App 上我们不推荐使用 HLS 这种播放协议播放直播视频源(虽然它很适合用来做点播),因为延迟太高,在 App 上推荐使用 FLV 或者 RTMP 播放协议。
步骤 5: 画面调整
- 大小和位置
修改指定 startPlay 函数的rect参数,可以指定视图的位置和大小。可以通过调整
- 调用 setRenderMode 铺满 or 适应
可选值 | 含义 |
---|---|
0 | 将图像等比例铺满整个屏幕,多余部分裁剪掉,此模式下画面不会留黑边,但可能因为部分区域被裁剪而显示不全 |
1 | 将图像等比例缩放,适配最长边,缩放后的宽和高都不会超过显示区域,居中显示,画面可能会留有黑边 |
- 使用 setRenderRotation: 画面旋转
可选值 | 含义 |
---|---|
0 | 正常播放(Home 键在画面正下方) |
2 | 画面顺时针旋转270度(Home 键在画面正左方) |
步骤 6: 暂停播放
对于直播播放而言,并没有真正意义上的暂停,通过调用 pause,所谓的直播暂停,只是画面冻结和关闭声音,而云端的视频源还在不断地更新着,所以当您调用 resume 的时候,会从最新的时间点开始播放,这跟点播是有很大不同的(点播播放器的暂停和继续与播放本地视频文件时的表现相同)。
this.$refs.livePlayer.pause({}, ret => {
console.log(ret);
});
this.$refs.livePlayer.resume({}, ret => {
console.log(ret);
});
步骤 7: 结束播放
stopPlay 结束播放时,会自动销毁播放器视频窗口。
this.$refs.livePlayer.stopPlay({}, ret => {
console.log(ret);
});
步骤 8: 消息接收
此功能可以在推流端将一些自定义 message 随着音视频线路直接下发到观众端,适用场景例如: (1)冲顶大会:推流端将题目下发到观众端,可以做到“音-画-题”完美同步。 (2)秀场直播:推流端将歌词下发到观众端,可以在播放端实时绘制出歌词特效,因而不受视频编码的降质影响。 (3)在线教育:推流端将激光笔和涂鸦操作下发到观众端,可以在播放端实时地划圈划线。
通过下方方案可以使用这个功能:
- init 初始化传入 enableMessage 参数,并设置为true
- 通过 onGetMessageEvt 事件回调监听消息
this.$refs.livePlayer.setLivePlayerListener({}, ret => {
if (ret.hasOwnProperty('eventType')) {
if ('onGetMessageEvt' == ret.eventType) {
// 消息处理
console.log(ret.msg);
}
}
})
步骤 9: 屏幕截图
通过调用 snapshot 您可以截取当前直播画面为一帧屏幕,此功能只会截取当前直播流的视频画面,如果您需要截取当前的整个 UI 界面,请调用uniApp的API 来实现。
更多功能
- 截留录制
- 清晰切换
- 直播时移
扫码添加, 获取技术支持:
微信号: ruanyunkeji006