集成微信小程序 SDK

视频点播为微信小程序播放场景提供播放器、日志上报等一系列 SDK 和组件，助您实现需要的业务功能。

• 播放器 SDK：提供完善的播放控制与良好的交互体验。
• 日志上报 SDK：支持上报播放日志，覆盖播放量、播放失败率、首帧时间、卡顿率等播放指标，与质量平台配合使用，可实现精细化的指标统计、实时的数据监控和深度的指标分析。

前提条件

您需要在小程序后台 > 开发 > 开发设置 > 服务器域名中添加日志上报域名：https://mcs.zijieapi.com。

操作截图示例如下。

添加依赖

# npm
npm i veplayer-mp-wechat // 播放器 SDK
npm i veplayer-mp-logger // 日志上报 SDK

# yarn 
yarn add veplayer-mp-wechat // 播放器 SDK
yarn add veplayer-mp-logger  // 日志上报 SDK

        

构建 npm 包

您需要点击微信开发者工具菜单栏中的工具 > 构建 npm。

引入组件

详情请参考微信官方文档小程序自定义组件的引入方式。引入微信小程序点播 SDK 的代码示例如下：

{
  "usingComponents": {
    "veplayer": "veplayer-mp-wechat"
  }
}

使用组件

配置播放器日志

1. 您需要在火山引擎视频点播控制台，新建应用并获取应用 ID（App ID）。

   

2. 引入日志组件，在页面加载前设置数据采集 SDK 的构造器。

   代码示例如下所示：

   import { initCollector } from 'veplayer-mp-logger'
   
   initCollector({
     appId: xxxx, // 您可在火山引擎视频点播控制台上获取应用 AppID
     userId: '7231***6007992', // 用户 ID，强烈建议您使用与业务相关的用户 ID。如不传入，SDK 将随机生成一个值
   })
   

   说明

   • 上述代码示例是 ES6 写法，该写法需要开启相关配置：在微信开发者工具的本地设置下，勾选 将JS编译成ES5。
   • 请注意 setCollector 方法第二项参数中的 userId。这是用于识别单一用户的 ID。强烈建议您使用与业务相关的用户 ID，以便在发生播放错误时进行单点排查，精准定位故障。如您没有设置用户 ID，SDK 将随机生成一个值。
   • 如果在不使用小程序点播 SDK 的情况下，也能够进行播放日志上报，具体操作请参考 veplayer-mp-logger。

使用播放器组件

按照如下示例代码在项目中引用播放器。

<view>
  <!-- 以下是对小程序播放器组件的引用 -->
  <veplayer
    id="videoContainer"
    showPlayBtn
    autoplay
    src="{{src}}"
    logInfo="{{logInfo}}"
    bindplay="onPlay"
  />
</view>

对应业务组件中添加日志上报需要的视频信息配置，代码示例如下：

// index.js
Component({
  data: {
    src: 'https://xxxx.mp4',
    logInfo: {
      vtype: 'MP4',        // [可选]播放格式类型， 默认为 'MP4'，可选值'HLS' || 'MP4' 
      codecType: 'h264',   // [可选]视频编码类型，默认 h264，'h264' || 'h265'
      sourceType: 'url',   // [可选]播放资源类型， 可选 'url'
      bitrate: 1334556,    // [可选]视频码率，默认为 0
      tag: 'myTag',        // [可选]播放场景
      subtag: 'subtag',    // [可选]二级播放场景
      logger: true,        // [可选] 是否开启 log 打印，默认 false， 开发环境可设置为 true
    }
  }
})

查看日志上报数据

视频信息配置完成后，查看日志上报数据的操作步骤如下：

1. 登录视频点播控制台。

2. 单击左侧导航栏质量平台 > 播放看板，进入播放看板页面，选择大盘速览页签。

3. 在查询条件中选择微信小程序。详细操作说明请见查看大盘速览。

   

   注意

   小程序播放质量数据仅采集真机 Android 和 iOS 系统的数据。

   • 一般情况下，数据延时为 5～10 分钟。
   • 如果发现过去很久没有看到数据，可能的原因为您通过开发者工具模拟器、桌面端微信播放的小程序数据均会被过滤。

组件属性

小程序播放器封装了 video 原生组件，支持配置大部分的 video 属性。原生组件支持的属性配置详情请参考微信官方文档。以下列表展示了新增属性及差异化属性。

{
  immersive: boolean, // 是否启用半沉浸式
  delay?: number, // 进入半沉浸状态/隐藏状态的延迟
  focusDelay?: number, // 隐藏态进入 `focus` 态是否自动切换
}

{
 immersive: false,
 delay: 10000,
 focusDelay: 0
}

event.detail = {currentTime, duration} 。

event.detail = {fullScreen, direction} // direction 有效值为 vertical 或 horizontal

event.detail = {buffered} //百分比

event.detail = {width, height, duration}

event.detail = {show}

组件接口

小程序播放器封装了 VideoContext，提供同原生接口一致的 API。代码示例如下所示。

const component = this.selectComponent("#videoContainer");
const player = component.getContext()

// 原生接口
player.play()
player.pause()
player.stop()
player.seek(10)
player.sendDanmu(Object data)
player.playbackRate(1)
player.requestFullScreen({ direction: 90 })
player.exitFullScreen()
player.exitPictureInPicture()
player.requestBackgroundPlayback()
player.exitBackgroundPlayback()

组件事件

微信小程序播放器对外支持 2 种方式的事件监听形式：

• 组件属性 bind 方式事件监听

• 组件对象提供事件订阅的机制进行事件监听

请选择其中一种进行订阅，尽量不要两者混用。这两种方式在组件实例中，被从页面节点树移除(lifetimes->detached)时，进行事件解绑，您无需单独关注事件泄漏的问题。

组件属性 bind 方式事件监听

请参见组件属性中 bind 开头的事件属性。

组件对象提供事件订阅的机制进行事件监听

小程序播放器提供了接口可以获取 player context，并可以对 player 添加事件订阅，从而实现任意时刻对各种播放事件添加/移除监听的功能。代码示例如下所示。

const component = this.selectComponent("#videoContainer");
const player = component.getContext();

// 事件订阅
player.on('error', (e) => {
  console.log('event error:', e)
});
player.on('timeupdate', (e) => {
  const { currentTime, duration } = e.detail;
  console.log('event timeupdate:', currentTime, duration)
});
// ...

详细的事件列表如下所示。