veplayer-mp-logger-backup v0.0.6

小程序播放性能数据采集SDK

该SDK需要配合小程序播放器使用，用于采集用户播放行为数据，例如观次数(VV)、累计观看时长、卡顿信息等等

配置域名白名单

因为埋点数据上报需要发起请求，因此在使用之前需要将数据上报的域名添加到小程序的服务器域名白名单中

日志上报的域名为： https://mcs.zijieapi.com

在小程序后台 > 开发 > 开发设置 > 服务器域名中添加以下域名配置, 具体操作如下

微信小程序操作截图

抖音小程序操作截图

获取APPId

您需要在火山引擎视频点播控制台，新建应用，获取应用的唯一 AppID。

接入

安装

# npm
npm i veplayer-mp-logger

# yarn 
yarn add veplayer-mp-logger

构建 npm 包

微信小程序

请优先了解微信小程序官网对于 npm 支持 的介绍

点击开发者工具中的菜单栏：工具 --> 构建 npm

具体操作如下图

抖音小程序

请优先了解抖音小程序官网对于 npm 支持 的介绍

具体操作如下图

引用代码

在小程序播放器中初始化logger的实例并绑定小程序播放器，使用demo如下

// index.js
import Collector from 'veplayer-mp-logger'
const EVENTS = Collector.EVENTS

/**
 * 全局初始化上传SDK
 * */
Collector.uploader.init({
  log: true,                  // 是否开启log, 默认false [可选]
  app_name: '视频云微信小程序', // 应用名称, [必选]
  app_version: '1.0.0',      // 应用版本, [必选]
})

Page({
  onReady: function (res) {
    console.log('onReady this', this)
    this.videoContext = wx.createVideoContext('myVideo')
    this.videoContext.bindPause = (e) => {
      console.log('pauseCallback this', this)
    }
    this.videoContext.bindPlay = (e) => {
      console.log('playCallback this', this)
    }

/**
 * @typedef {Object} IConfig
 * @property {number} [lineAppId] 用户appId, [必传]
 * @property {string} [lineUserId] 用于编辑用户的id[可选], 不传的话直接使用teaSDK随机生成的uuid
 * @property {number} [playType] 播放类型，点播-0，直播-1
 * @property {string} [sourceType] 播放资源类型, [可选]， 默认'vid'
 * @property {string} [playerVersion] 当前播放器sdk的版本信息 [必传]
 * @property {'h264'|'h265'} [codecType] 视频编码类型[必传]
 * @property {'HLS'|'MP4'|'FLV'|'DASH'} [vtype] 播放类型[可选],默认为'MP4'
 * @property {number} [bitrate] 视频码率[可选], 默认为0
 * @property {string} [vid] [可选]sourceType为vid的时候编辑视频id
 * @property {string} [tag] [可选]播放场景
 * @property {string} [subtag] [可选]二级播放场景
 */

    /**
     * 初始化collector实例
     * 如果页面上有多个播放器实例，则需要在播放器组件的生命周期中实例化
     **/
    this.collector = new Collector({
      config: {
        lineAppId: 123,         // [必传]appId,和业务相关 
        lineUserId: 0,          // [可选]用于辨识每一个用户的id, 不传的话直接使用teaSDK随机生成的uuid
        vtype: 'MP4',           // [可选],播放的视频类型, 默认为MP4, 'HLS'|'MP4'|'FLV'|'DASH'
        codecType: 'h264',      // [可选],视频编码类型,默认为'h264', 'h264'|'h265'
        sourceType: 'url',      // [可选],播放资源类型, 默认'vid', 'vid' | 'url'
        playerVersion: '1.0.0', // [必传],当前播放器sdk的版本信息, 没有独立的播放器sdk，则可以传入应用版本号
        bitrate: 1334556,       // [可选], 视频码率, 默认为0
        vid: 'xxx',             // [可选]sourceType为vid的时候编辑视频id
        tag: 'xxx',             // [可选]播放场景
        subtag: 'xxx2'          // [可选]二级播放场景
      }
    })

    // 设置视频初始化信息
    this.collector.setVideoInfo({
      src: this.data.src,
      autoplay: this.data.autoplay
    })
  },
  data: {
    src: 'http://www.douyin.com/aweme/v1/play/?video_id=v0200fg10000cgqka8rc77u47d02i0vg&line=0&file_id=f273131e04c64174b7275df7537ba832&sign=efe97587dc1746da0b4166ac5ece87a0&is_play_url=1&source=PackSourceEnum_FEED&aid=6383',
    currentTime: 0,
    duration: 0,
    paused: true,
    ended: false,
    width:0,
    height: 0,
    buffered: 0
  },
  bindInputBlur: function(e) {
    this.inputValue = e.detail.value
  },
  bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue
    })
  },
  bindPlay: function() {
    this.videoContext.play()
  },
  bindPause: function() {
    console.log('bindPause this', this)
    this.videoContext.pause()
  },
  videoErrorCallback: function(e) {
    console.log('视频错误信息:', e)
    console.log(e.detail.errMsg)
    // 触发事件回调, 注意[e]为原生事件对象
    this.collector.trigger(EVENTS.ERROR, e)
  },
  videoPause: function(e) {
    // 触发事件回调, 注意[e]为原生事件对象
    this.collector.trigger(EVENTS.PAUSE, e)

    this.setData({
      paused: true
    })
  },
  videoPlay: function(e) {
    // 触发事件回调, 注意[e]为原生事件对象
    collector.trigger(EVENTS.PLAY, e)
    this.setData({
      paused: false
    })
  },
  videoEnded: function(e) {
    // 触发事件回调, 注意[e]为原生事件对象
    collector.trigger(EVENTS.ENDED, e)
    console.log('videoEnded:', e)
    this.setData({
      ended: true
    })
  },
  videoTimeupdate: function(e) {
    // 触发事件回调, 注意[e]为原生事件对象
    collector.trigger(EVENTS.TIME_UPDATE, e)
    this.setData({
      currentTime: e.detail.currentTime
    })
    if (this.data.isEnded) {
      this.setData({
        isEnded: false
      })
    }
  },
  videoWaiting: function(e) {
    // 触发事件回调, 注意[e]为原生事件对象
    collector.trigger(EVENTS.WAITING, e)
  },
  videoProgress: function (e) {
    // 触发事件回调, 注意[e]为原生事件对象
    collector.trigger(EVENTS.PROGRESS, e)

    this.setData({
      buffered: e.detail.buffered
    })
  },
  videoLoadedmetadata: function(e) {
    // 触发事件回调, 注意[e]为原生事件对象
    collector.trigger(EVENTS.LOADED_META_DATA, e)

    this.setData({
      duration: e.detail.duration,
      height: e.detail.height,
      width: e.detail.width
    })
  },
  videoSeekComplete: function(e) {
    // 触发事件回调, 注意[e]为原生事件对象
    collector.trigger(EVENTS.SEEK_COMPLETE, e)
  },
})

index.wxml 模板文件

<view class="page-body">
  <view class="page-section tc">
    <video id="myVideo" src="{{src}}"
    binderror="videoErrorCallback"
    bindplay="videoPlay"
    bindpause="videoPause"
    bindended="videoEnded"
    bindtimeupdate="videoTimeupdate"
    bindwaiting="videoWaiting"
    bindprogress="videoProgress"
    bindloadedmetadata="videoLoadedmetadata"
    bindseekcomplete="videoSeekComplete"
 </view>
</view>

数据验证

埋点发送时机：视频能播放结束的时候、播放中断的时候回发送埋点数据 开发工具【network】抓包如下

数据字段说明

基础信息

播放信息

数据直播查看

sdk接入完成之后，数据会上报到火山引擎，可登录视频点播控制台，选择左侧导航栏质量平台 > 播放看板，进入播放看板页面，选择大盘速览页签，在查询条件中选择在小程序点播 SDK 中配置的各项指标。详细操作说明请见查看大盘速览。