WeChat Mini Program Live Player Component Parameters

Configuration Parameters

<plv-live-player
  config="{{ config }}"
>
</plv-live-player>

Parameter List

config

Type: PlayerConfig Description: Player configuration parameters, including configuration information related to video playback. ps: To play using only the video component, you need to configure the forceVideo: true parameter.

controlSlots

Type: Array<ControlSlotTypes> Description: Custom control slots, used to customize the player's control elements.

<plv-live-player
  config="{{ config }}"
  controlSlots="{{ [ 'skin-play', 'skin-pause' ] }}"
>
  <!-- 自定义播放按钮样式 -->
  <view
    slot="skin-play"
    style="background: url('https://xxx/diy-play-icon.png');"
  ></view>

  <!-- 自定义暂停按钮样式 -->
  <view
    slot="skin-pause"
    style="background: url('https://xxx/diy-pause-icon.png');"
  ></view>
</plv-live-player>

autoplay

Type: boolean Description: Whether to automatically play the video.

vodSetting

Type: VodSetting Description: Playback-related configuration parameters, including information related to playback videos.

pipMode

Type: PictureInPictureMode Description: Picture-in-picture (small window playback) mode.

object-fit

Type: 'contain' | 'fillCrop', default value: contain.

Used to set how the video image fills the player container. Before use, confirm that the integrated custom component package or plugin version supports this property.

Set this property on the player component, not inside config:

<plv-live-player
  config="{{ playerConfig }}"
  object-fit="fillCrop"
/>

When integrating via plugin, set the same property on the player component declared on the page (for example, <polyv-live-player>).

To switch dynamically, use object-fit="{{ objectFit }}" and update the property value through the page's setData:

this.setData({ objectFit: 'fillCrop' }); // 切换为等比裁切铺满
this.setData({ objectFit: 'contain' }); // 切换为完整显示

Switching the fill mode does not require resetting config. This property applies to live streaming, playback, and warm-up videos; warm-up images are not affected. When playing with native video, fillCrop is mapped to cover.

min-cache / max-cache

Both parameters are optional standalone component properties and are not placed inside config.

The parameter meanings are consistent with WeChat native live-player.

<plv-live-player
  config="{{ playerConfig }}"
  min-cache="{{ minCache }}"
  max-cache="{{ maxCache }}"
/>

In the page data, you can set minCache: 1 and maxCache: 3, and update them through setData without resetting config. When using the plugin, set the same set of properties on the player component declared on the page (for example, <polyv-live-player>), and confirm that the referenced plugin version supports these two parameters.

This takes effect only for live streaming played with native live-player, and does not affect playback, warm-up, or live streaming played using video (such as forceVideo or .m3u8 addresses).

Increasing the buffer time helps resist network fluctuations but increases playback latency. Adjust according to network conditions and business requirements; buffer time is not equal to end-to-end latency, and adjusting these two parameters will not switch the playback mode.

FAQ

After setting fillCrop, why may black bars still appear?

fillCrop scales and crops according to the overall ratio of the video image and cannot identify or guarantee removal of black bars already present within the video source. If the black bars are encoded in the video, you need to adjust the streaming or video production settings.

Does switching the fill mode require reinitializing the player?

No. Simply update the component's object-fit property; there is no need to modify config.