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, and 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, please contact your account manager or the official "Polyv" customer service to request approval.

Importing Plugins

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

Screen Gesture Description

When using a custom control bar (useNativeControls=false), the non-control area of the player supports the following gestures:

• During video playback, pressing and holding still on a non-control area of the player screen for approximately 500 ms temporarily switches playback to 2x speed; releasing or canceling the gesture restores the playback speed to what it was before the press.
• While temporary 2x speed is active, the player displays a "Playing at 2x speed" prompt. Temporary speed changes do not trigger the playbackRateChange event.
• When playbackRate does not include the value 2, long-pressing will not switch speeds, and a prompt "Current video does not support speed playback" will appear. showPlaybackRateBtn only controls whether the speed button is displayed and does not serve as a speed permission toggle.
• Swiping left or right on a non-control area of the player screen allows previewing and jumping to a target playback time. During the swipe, only the target time is previewed; upon release, the player seeks to the target time in one go.
• Horizontal swiping on the screen follows the enableProgressGesture and isAllowSeek configurations; when isAllowSeek=ifViewed is active, it will not exceed the maximum watched progress.
• Operation buttons, the progress bar, and the settings panel retain their original interaction behaviors; double-tap to play, vertical volume/brightness adjustment, and system edge gestures remain as configured.

When using the WeChat native control bar (useNativeControls=true), press vslideGesture, vslideGestureInFullscreen, etc. to retain the WeChat native gesture behavior, without displaying the above custom gesture prompts.

videoFit Usage Instructions

videoFit is used to set the scaling mode of the video frame within the player container.

<polyv-player
  vid="{{vid}}"
  videoFit="contain"
></polyv-player>

When a vertical 9:16 video needs to be fully displayed in a horizontal 16:9 player, it is recommended to set videoFit="contain". It is normal for blank space to appear on both sides of the player. If you need to fill the player completely, you can set cover, but the top and bottom parts of the video may be cropped.

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 explanations 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. Do I need to apply for a video-related qualification to use the on-demand mini-program plugin?

• 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 entity 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 employs 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. Can't play videos authorized by the mini program?

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

Version Iteration Record

VOD Mini Program Plugin Changelog