弱网提示

背景

用户在使用小程序时，可能会遇到网络不通畅的情况，这可能导致视频播放卡顿。

弱网状态监听与提示实现

从小程序基础库2.21.0版本开始，小程序官方提供了一个事件 wx.onNetworkWeakChange ，用于监听弱网状态变化。然而，此接口不支持小程序插件内部调用。

为解决这个问题，polyv点播插件提供了一个接口，用于显示弱网状态提示。一种简单的实现方式是在小程序中监听 wx.onNetworkWeakChange 事件，在网络变弱时调用插件的接口显示提示。效果如下图所示。

接入流程如下：

1. 接入方的小程序监听 wx.onNetworkWeakChange 事件
2. 在 wx.onNetworkWeakChange 的回调中调用 showWeakNetworkTips 接口

示例代码：

wx.onNetworkWeakChange(function (res) {
  if (res.weakNet) {
    this.selectComponent('#polyvPlayer').showWeakNetworkTips();
    // 可以使用setTimeout延迟关闭提示
  }
}

如果弱网提示的接口不满足业务需求，可以结合 wx.onNetworkWeakChange，通过插件提供的 getQuality() 接口获取视频清晰度数据，自行实现一个弱网提示组件。

API

polyvPlayerContext.showWeakNetworkTips(Object options, Object callbacks)

使用限制

此接口从0.16.1版本开始支持。

功能描述

此接口在插件的视频区域显示弱网提示，可以通过参数修改提示的文案和位置。

使用注意：

• 如果当前清晰度已经为最低，则不会显示清晰度的切换按钮，对自定义的文案也有效。

• 在视频、音频模式切换或清晰度切换等特定情况下，提示会被插件内部逻辑关闭，除上述的情况，提示的显示和隐藏由业务方控制。

• 弱网提示需要用户点击关闭，或者由业务方调用closeWeakNetworkTips接口进行关闭。

• 音频模式没有清晰度，因此不会显示切换清晰度的按钮。

参数

Object options

Object callbacks

示例代码

// 不设置参数
this.selectComponent('#polyvPlayer').showWeakNetworkTips();

// 设置自定义的文案和关闭时的回调
this.selectComponent('#polyvPlayer').showWeakNetworkTips({
  customNormalText: '当前网络不佳',
  customActiveText: ' 降低清晰度',
  customSuccessText: '已经成功切换啦！',
  position: 'right-top'
}, {
  onWeakTipsClose: () => {
    console.info('close!!!');
  }
});

polyvPlayerContext.closeWeakNetworkTips()

使用限制

此接口从0.16.1版本开始支持。

功能描述

关闭弱网提示。

示例代码

this.selectComponent('#polyvPlayer').closeWeakNetworkTips();

polyvPlayerContext.getQuality()

使用限制

此接口从0.16.1版本开始支持。

功能描述

获取当前的清晰度数据：视频的清晰度数组、当前清晰度的index、当前清晰度的文案。结合此接口可以获取更低一级清晰度的文案。

返回结果

Object result

示例代码

const quality = this.selectComponent('#polyvPlayer').getQuality();
// 返回结果示例 {current: 0, text: "流畅", qualitys: ["超清", "高清", "流畅"]}