Mini Program Playback Plugin

Polyv Cloud Video-on-Demand Mini Program Playback Plugin is built on Polyv's powerful backend capabilities and video processing technology, deeply integrated with its own video cloud services. It provides users with simple, fast, secure, and stable video playback services, allowing users to easily focus on their business development and enjoy an ultra-fast, high-definition playback experience.

Simply upload the video to the Polyv Cloud Video-on-Demand platform to obtain a vid, then use the plugin to play the video, enabling quick integration with your own business.

Click here to view this document on the official WeChat page.

WeChat Mini Program Integration Method

Apply to Use the Plugin

First, refer to WeChat's official Plugin Usage Documentation to apply for plugin permissions. When applying to use the plugin, fill in the following appid: wx4a350a258a6f7876.

After adding it, contact your account manager or the official "Polyv" customer service to request approval.

Import Plugin

For details, see the official documentation. Use the latest version of the plugin whenever possible.

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

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

Using the Player Component

wxml file

<polyv-player
  id="{{playerContext}}" // 组件ID
  playerId="{{playerId}}" //播放器ID
  vid="{{vid}}" // 视频ID
  viewerInfo="{{viewerInfo}}" // 观众信息
  autoplay="{{true}}" // 是否自动播放
  bind:statechange="onStateChange" //事件绑定
  >
  <!-- 使用具名插槽，实现在全屏和非全屏的情况，在 video 组件上显示内容 -->
  <view slot="custom">自定义插槽</view>
</polyv-player>

Attributes Supported by Component Elements

Events Supported by Components

Plugin API

You can obtain the player instance through a plugin, which includes the following methods:

| Name | Parameters | Return Value | Description

Example Code:

// 通过插件的自定义组件ID获取上下文，在一些特殊场景下，如触发小程序生命周期onShow或onHide，建议重新使用this.selectComponent('#myComponentID')再次获取一次组件上下文
var polyvPlayerContext = this.selectComponent('#myComponentID');
polyvPlayerContext.play();  // 播放
polyvPlayerContext.pause(); // 暂停
polyvPlayerContext.stop() //停止
polyvPlayerContext.seek(100);  //跳转到指定位置，单位：秒
polyvPlayerContext.playbackRate(1.5); // 设置播放速率
var PolyvBarrageContext = this.selectComponent('#myComponentID').getPolyvBarrage(); // 获取弹幕实例
PolyvBarrageContext.sendDanmu({
   color: '#ffffff',
   text: this.data.danmuText
}); // 添加单条弹幕数据
PolyvBarrageContext.addDanmuData([{
   color: '#ffffff',
   text: this.data.danmuText
}]); // 添加多条弹幕数据
PolyvBarrageContext.closeDanmu(); // 关闭弹幕
PolyvBarrageContext.openDanmu(); // 开启弹幕

wx.onWindowResize(windowResize); // 监听窗口尺寸变化

var windowResize = function() {
   var polyvSkinContext = this.selectComponent('#polyvPlayer').getPolyvSkin(); // 获取皮肤实例
   polyvSkinContext.resize(); // 自适应进度条尺寸
}

Marquee Parameters

The marqueeConfig parameter properties are as follows:

Error Code

External Style Classes

Starting from version 0.15.0 of the plugin, external style classes are supported for customizing the skin style of the player's control bar. For detailed instructions and limitations regarding external style classes, please refer to the WeChat Mini Program official documentation. If style modifications are ineffective, it is recommended to add !important to increase priority.

Currently supported styles that can be modified:

Example wxml and wxss:

<polyv-vod-player
  ex-control-icon-play="plv-custom-control-play" //自定义的class名
  ex-control-icon-pause="plv-custom-control-pause"
  ex-control-timeline="ex-control-timeline"
  ex-control-current="ex-control-current"
  ex-control-duration="ex-control-duration"
  ex-control-icon-setting="ex-control-setting"
  ex-control-setting-panel="ex-control-setting-panel"
  ex-control-icon-fullscreen="ex-control-icon-fullscreen"
  ex-control-icon-audio="ex-control-icon-audio"
  ex-control-icon-back="ex-control-icon-back"
  ex-control-progress-dot="ex-control-progress-dot"
  ex-control-progress-bar="ex-control-progress-bar"
  ex-control-progress-load="ex-control-progress-load"
  ex-control-progress-current="ex-control-progress-current"
  ex-control-skin="ex-control-skin"
  ex-control-setting-btn="ex-control-setting-btn"
  ex-control-setting-btn-select="ex-control-setting-btn-select"
  ex-control-setting-text="ex-control-setting-text"
/>

.plv-custom-control-play {
  background: url('https://{自定义的icon地址}/play.png') !important;
}

.plv-custom-control-pause {
  background: url('https://{自定义的icon地址}/pause.png') !important;
}

.ex-control-timeline {
  color: red;
}

Q&A

• Q1. Does using the on-demand mini-program plugin require applying for a video-related qualification?

• A1. When using the on-demand mini-program plugin, the mini-program typically does not need to reapply for the "Entertainment - Other Video" category qualification that the plugin itself possesses. However, it only supports non-personal mini-programs allowed by WeChat. The integrator must still ensure that the subject type, actual business content, and selected service category comply with WeChat's requirements, and adhere to the relevant regulations for using "video plugins" in mini-programs. If the mini-program does not use this plugin but instead uses self-developed components or other methods to provide video playback, it should apply for the corresponding service category based on the actual business. The final decision is subject to WeChat's review results. For details, refer to the mini-program plugin feature introduction and WeChat's open service categories.

• Q2. The video authorized by the mini program cannot play?

• A2. Currently, the mini-program on-demand plugin does not support videos authorized through the mini-program method. It is recommended to use WEB authorization.

Version Iteration Record

VOD Mini Program Plugin Changelog