弱網提示

背景

使用者在操作小程式時，可能會遇到網路不順暢的情況，這可能導致影片播放卡頓。

弱網狀態監聽與提示實作

從小程式基礎庫 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: ["超清", "高清", "流畅"]}