小程序 · 云直播 使用播放组件

在正式接入前，请先阅读微信小程序提供的 插件文档，了解插件的使用范围和限制。

一、版本支持

·最新插件版本：1.3.12。新增小窗功能，包体缩减。需在云直播控制台添加插件，使用小程序直播域名才能调用，无需通过 version 标识方案（即与旧版本不兼容，需要在云直播控制台接入插件）。

·最低插件版本限制：1.3.4。仍支持旧方案，但是新功能暂时不支持，需要通过 version 2 来标识新方案。

二、准备工作

1. 在 微信公众平台 注册并登录小程序。

2. 符合接入要求，申请插件并购买小程序·云直播服务，详见 小程序·云直播插件。

3. 开通小程序·云直播服务后，登录 云直播控制台，在域名管理中添加小程序直播域名，然后 自助拼接直播地址。

4. 下载并安装最新版本的 微信开发者工具，使用小程序绑定的微信号扫码登录开发者工具。


三、引入插件代码

在小程序中引入插件代码，可参考 Demo 源码。使用插件前需在小程序工程的app.json中声明要使用的插件，例如：

{ …… "plugins": { "liveRoomPlugin": { "version": "1.3.0", "provider": "wx95a7d2b78cf30f98" } }}

四、使用播放组件

在 page 的.json文件中定义需要引入的live-room-play组件，使用plugin://协议。

{ "usingComponents": { "live-room-play": "plugin://liveRoomPlugin/live-room-play" //播放组件 }}

在 page 的.wxml文件加载上一步引入的live-room-play组件。

<view class="container-box"><view class="player-view"> <live-room-play liveAppID="{{liveAppID}}" playUrl="{{playUrl}}" orientation="{{orientation}}" objectFit="{{objectFit}}" minCache="{{minCache}}" maxCache="{{maxCache}}" mode="{{mode}}" muted="{{muted}}" debug="{{debug}}" bindPlayEvent="onPlayEvent" > </live-room-play></view></view>

五、播放组件相关属性说明

直播插件的使用方法和微信原生标签的方法一致，可参考微信小程序标签 live-player 的文档说明。

在播放区域叠加额外展示信息
组件提供了一个<slot>节点，用于承载组件引用时提供的子节点。本功能受限于微信，只能在组件上叠加cover-image、cover-view和canvas。

六、组件实例化

live-room 组件支持播放、停止播放、全屏等接口，要调用这些接口需要先获取到 live-room-play 的实例。

怎么获取 live-room-play 组件实例？
live-room-play 是腾讯视频云直播插件中的一个组件，在腾讯视频云直播插件中暴露了获取 live-room-play 组件实例的接口，你只需要先在 page 的.js文件中，将插件加载进来，即可获取到 live-room-play 组件实例。

// 加载插件var plugin = requirePlugin("liveRoomPlugin")// 获取 live-room 组件实例var liveRoomComponent = plugin.instance.getLiveRoomInstance();

七、组件接口

live-room-play 组件提供如下接口，可参考微信小程序组件 LivePlayerContext 方法。

八、start

开始播放。调用之后会启动播放。在开始播放之前，playUrl也要保证已经设置到组件属性中。

// 获取 live-room-play 组件实例var liveRoomComponent = plugin.instance.getLiveRoomInstance();liveRoomComponent.start();

九、stop

结束播放。

// 获取 live-room-play 组件实例var liveRoomComponent = plugin.instance.getLiveRoomInstance();liveRoomComponent.stop();

十、requestFullScreen

全屏播放。

// 获取 live-room-play 组件实例var liveRoomComponent = plugin.instance.getLiveRoomInstance();liveRoomComponent.requestFullScreen(true); //全屏播放，默认横屏//liveRoomComponent.requestFullScreen(false); //退出全屏//liveRoomComponent.requestFullScreen(true,90); //90代表屏幕逆时针90度，-90代表屏幕顺时针90度，可通过该值设置全屏时的方向

十一、pause

暂停播放。

// 获取 live-room-play 组件实例var liveRoomComponent = plugin.instance.getLiveRoomInstance();liveRoomComponent.pause(); //暂停播放

十二、resume

恢复播放。

// 获取 live-room-play 组件实例var liveRoomComponent = plugin.instance.getLiveRoomInstance();liveRoomComponent.resume(); //恢复播放

十三、mute

静音。

// 获取 live-room-play 组件实例var liveRoomComponent = plugin.instance.getLiveRoomInstance();liveRoomComponent.mute(); //静音

十四、requestBackgroundPlayback

请求后台播放。

// 获取 live-room-play 组件实例var liveRoomComponent = plugin.instance.getLiveRoomInstance();liveRoomComponent.requestBackgroundPlayback();

十五、exitBackgroundPlayback

退出后台播放。

// 获取 live-room-play 组件实例var liveRoomComponent = plugin.instance.getLiveRoomInstance();liveRoomComponent.exitBackgroundPlayback();

十六、示例代码

如果小程序需要后台播放纯音频流，可以使用纯音频的转码流进行播放，示例代码如下：

this.audio = wx.getBackgroundAudioManager();this.audio.protocol = 'hls';// 这个属性设置为 hls 才支持 m3u8 类型的直播流this.audio.title = '后台音乐';// 显示在状态栏的标题this.audio.src = "http://domain/live/streamName_pureAudio.m3u8?txSecret=xxxx&txTime=xxxxx"; // 注：domain 是小程序域名，streamName 是指定的流名称，// 后面加 _pureAudio 就是纯音频转码流，后台播放时可以节省流量。

十七、播放事件

播放事件分为：

·普通的播放事件，tag 是 playEvent，code 含义见 状态码。

·错误事件，tag 是 error。现在只有白名单校验出错时会抛出，code 是-1，具体的错误原因在 detail 中给出。