保利威雲直播小程式播放插件

保利威雲直播小程式播放插件提供了開箱即用的直播播放器，為客戶在小程式端快速接入直播能力提供了有力支援。

快速接入

注意：請確保您的小程式具備電商平台或線上視訊課程類目，否則無法使用本插件（詳見微信小程式相關文件說明）。

在接入過程中，除了本文檔，也可以參閱官方的小程式插件使用說明。

新增插件

在小程式管理後台的「設定-第三方服務-插件管理」中查詢並新增插件，有兩種查詢方式：

• 透過 appid 查詢。填寫 wxfb2e591959a8bacf ，搜尋插件並新增。
• 透過插件名稱查詢。填寫 Polyv觀看 ，搜尋插件並新增。

引入插件程式碼包

如無特殊情況，請盡量使用插件的最新版本。

// 使用插件前，使用者要在 app.json 中声明需要使用的插件
"plugins": {
  "polyv-live-player": {
    "version": "0.13.0",
    "provider": "wxfb2e591959a8bacf"
  }
}

// 使用插件提供的自定义组件。在 json 文件定义需要引入的自定义组件时，使用 plugin:// 协议指明插件的引用名和自定义组件名
"usingComponents": {
  "polyv-live-player": "plugin://polyv-live-player/live-player"
}

呼叫播放器元件

<!--
videoOption 为视频配置
controls 为控制栏配置
appSettings 为鉴权配置
配置字段见 API 说明
-->
<polyv-live-player
  id="polyvPlayer"
  videoOption="{{videoOption}}"
  controls="{{controls}}"
  appSetting="{{appSetting}}"
>
</polyv-live-player>

API

參數說明

videoOption: {
  uid: '',
  cid: '',
  // 自动切换直播/暂存
  isAutoChange: true, 
  // 画中画，同微信小程序video的 picture-in-picture-mode
  pipMode: [],
  // statistics 设置自定义统计参数
  statistics: {
    param1: 'param1',
    param2: 'param2',
    param4: 'param4',
    param5: 'param5'
  },
  // 自动播放，默认true
  autoplay: true,
  // 回放视频循环播放，默认false
  vodLoop: true,
  // 回放指定视频初始播放位置, 单位秒
  vodInitialTime: 20,
  // 回放视频是否开启控制进度的手势, 默认false
  vodEnableProgressGesture: true,
},
// app参数设置
appSetting: {
  // polyv后台appId
  apiId: appId,
  // 加密sign， 需要channelId, appId, timestamp 3个参数按照加密规则生成参数
  sign,
  // 时间戳
  timestamp,
},

/**
 * controls: Array | null | string
 * 方式1: Array: ["play", "progress", "fullscreen", "refresh", "setting"]
 *   play：播放/暂停按钮
 *   progress：进度条
 *   fullscreen：全屏按钮
 *   refresh：刷新按钮（仅直播支持
 *   setting: 设置按钮 (回放 + 直播) 
 * 
 * 方式2: controls: null 不显示控制栏
 * 
 * 方式3：controls: 'default' 显示默认的控制栏
 **/
controls: ["play", "progress", "fullscreen", "refresh", "setting"]

播放器介面

取得元件的實例

// 假设插件的组件id为polyvPlayer
const polyvVideoContext = this.selectComponent('#polyvPlayer');

getVideoContext(): VideoContext | LivePlayerContext

取得目前播放視訊的上下文，具體內建方法，請參考微信官方文件。

getLiveType() :'live' | 'warmImage' | 'warmVideo' | 'vod' | ''

取得目前的直播狀態。回傳值說明：

• ''：播放器初始化未完成時，liveType為空字串。
• 'live'：處於直播狀態。
• 'warmImage'：處於顯示暖場圖片或暫無直播狀態。
• 'warmVideo'：處於暖場視訊狀態。
• 'vod'：處於暫存回放狀態。

destroy() : void

銷毀播放器（邏輯上銷毀）。UI 介面請透過 wx:if 控制。

播放器事件

使用範例

<polyv-live-player
  id="polyvPlayer"
  videoOption="{{videoOption}}"
  appSetting="{{appSetting}}"
  bind:onChannelDetailReq="onChannelDetailReq"
  bind:onLiveStatusChange="onLiveStatusChange"
  bind:onLiveTypeChange="onLiveTypeChange"
>
</polyv-live-player>

onLiveTypeChange

liveType 發生改變時觸發。

範例：

onLiveTypeChange(e) {
  // e.detail 即为状态的字符串表示（见 getLiveType 的返回值说明）
  console.log('liveType:', e.detail);
}

onLiveStorageProgress

適用於直播回放、暖場等場景，在進度發生改變時觸發。

範例：

onLiveStorageProgress(e) {
  // e.detail.currentTime 为当前视频的播放进度
  console.log('onLiveStorageProgress', e.detail.currentTime);
}

onLiveVodWaiting

適用於回放等場景，在播放發生緩衝時觸發。

範例：

onLiveVodWaiting() {
  console.log('onLiveVodWaiting');
},

onLiveVodEnd

適用於直播回放、暖場等場景，在播放結束時觸發。

範例：

onLiveVodEnd() {
  console.log('onLiveVodEnd');
},

onChannelDetailReq

頻道詳情介面請求成功後觸發的事件。

範例：

onChannelDetailReq(e) {
  // e.detail 为频道详情数据
  console.log('onChannelDetailReq', e.detail);
},

onLiveStatusChange

直播狀態改變時觸發。

範例：

onLiveStatusChange(e) {
  // status 为当前直播状态的字符串表示，有 'live' 和 'end' 两个取值
  // sessionId 为直播场次
  console.log('onLiveStatusChange', e.detail.status, e.detail.sessionId)
}

擴充

本插件僅具備視訊播放能力，如需實現直播介紹、聊天室、連麥等功能，可參考微信小程式觀看頁SDK進行整合。

Change log

v0.11.0

• 緩衝 loading 顯示邏輯最佳化

v0.10.1

• 插件 bug 修復。

v0.10.0

• 新增播放元件參數 autoplay、vodLoop、vodInitialTime。
• 新增回放緩衝事件 onLiveVodWaiting。

v0.9.0

• 新增回放功能。

v0.8.0

• 支援低延遲播放。

v0.7.0

• 增加小窗播放參數。
• 新增取得視訊上下文實例的方法 getVideoContext()。

v0.6.0

• 最佳化初始化的載入速度。

v0.5.0

• 新增參數控制播放器控制欄的元素，參數 controls，不傳這個參數時顯示預設控制欄，傳空陣列時不顯示控制欄，傳非空陣列時根據陣列內容顯示對應的元素。
• 新增事件 onChannelDetailReq 回傳頻道詳情資料。
• 新增事件：onLiveTypeChange。
• 新增介面：getLiveType。
• 修復 全螢幕狀態下，回放切直播之後退出全螢幕。
• 修復 播放器控制項欄會先出現直播的控制欄，再切到回放的控制欄。

v0.2.0~0.4.0

• Bug 修復。

v0.1.0

• 保利威雲直播小程式播放插件發佈。