Polyv Help Center

Help Center

Live Web SDK

Polyv Cloud Live Mini Program Player Plugin

Updated: 2025-10-10 15:04:20

The Polyv Cloud Live Mini Program Player Plugin provides an out-of-the-box live streaming player, offering robust support for customers to quickly integrate live streaming capabilities into their Mini Programs.

Quick Integration

Note: Ensure your Mini Program has the E-commerce Platform or Online Video Course category, otherwise this plugin cannot be used (see WeChat Mini Program related documentation for details).

During integration, in addition to this document, you can also refer to the official Mini Program Plugin Usage Guide.

Adding the Plugin

In the Mini Program management console, go to "Settings - Third-Party Services - Plugin Management" to search for and add the plugin. There are two search methods:

  • Search by appid. Enter wxfb2e591959a8bacf, search for the plugin, and add it.
  • Search by plugin name. Enter Polyv观看, search for the plugin, and add it.

Importing the Plugin Code Package

Unless there are special circumstances, please use the latest version of the plugin.

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

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

Calling the Player Component

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

API

Parameter Description

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"]

Player Interface

Getting the Component Instance

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

getVideoContext(): VideoContext | LivePlayerContext

Gets the context of the currently playing video. For specific built-in methods, please refer to the official WeChat documentation.

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

Gets the current live streaming status. Return value description:

  • '': When the player initialization is incomplete, liveType is an empty string.
  • 'live': In live streaming state.
  • 'warmImage': Displaying a warm-up image or no live stream currently.
  • 'warmVideo': In warm-up video state.
  • 'vod': In temporary replay state.

destroy() : void

Destroys the player (logically). For the UI interface, control it via wx:if.

Player Events

Usage Example

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

onLiveTypeChange

Triggered when liveType changes.

Example:

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

onLiveStorageProgress

Applicable to scenarios such as live replay and warm-up, triggered when progress changes.

Example:

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

onLiveVodWaiting

Applicable to scenarios such as replay, triggered when buffering occurs during playback.

Example:

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

onLiveVodEnd

Applicable to scenarios such as live replay and warm-up, triggered when playback ends.

Example:

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

onChannelDetailReq

Event triggered after a successful channel details API request.

Example:

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

onLiveStatusChange

Triggered when the live streaming status changes.

Example:

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

Extensions

This plugin only provides video playback capabilities. To implement features such as live stream introductions, chat rooms, or co-hosting, please refer to the WeChat Mini Program Viewing Page SDK for integration.

Change log

v0.11.0

  • Optimized buffering loading display logic.

v0.10.1

  • Plugin bug fixes.

v0.10.0

  • Added player component parameters: autoplay, vodLoop, vodInitialTime.
  • Added replay buffering event: onLiveVodWaiting.

v0.9.0

  • Added replay functionality.

v0.8.0

  • Supports low-latency playback.

v0.7.0

  • Added mini-window playback parameters.
  • Added method to get video context instance: getVideoContext().

v0.6.0

  • Optimized initialization loading speed.

v0.5.0

  • Added parameter controls to control player control bar elements. When this parameter is not passed, the default control bar is displayed. When an empty array is passed, the control bar is hidden. When a non-empty array is passed, corresponding elements are displayed based on the array content.
  • Added event onChannelDetailReq to return channel detail data.
  • Added event: onLiveTypeChange.
  • Added interface: getLiveType.
  • Fixed: Exiting full screen when switching from replay to live stream in full-screen mode.
  • Fixed: The player control bar initially showing the live stream control bar before switching to the replay control bar.

v0.2.0~0.4.0

  • Bug fixes.

v0.1.0

  • Polyv Cloud Live Mini Program Player Plugin released.
联系客服，在线咨询