veplayer-mp-douyin

Veplayer小程序播放器

小程序播放器抖音原生版本

快速接入小程序播放器

只需三步：安装、构建 npm、代码引入、即可完成小程序播放器组件的使用。

安装

# npm
npm i veplayer-mp-douyin

# yarn 
yarn add veplayer-mp-douyin

构建 npm 包

请优先了解抖音开放平台官网对于 npm 功能 的介绍

导入项目，并在开发工具右侧【NPM功能: 依赖管理】中添加npm包

引入组件

参考自定义组件的使用方式

⚠️注意由于抖音开发者工具（截止4.0.7-1版本）npm功能的缺陷，目前引用npm功能，需要手动将node_modules的veplayer-mp-douyin复制到components内，并手动安装依赖eventemitter3和xgplayer-service-miniprogram。

{
  "usingComponents": {
    "ve-video": "ext://veplayer-mp-douyin/veplayer" // 抖音开发者工具4.0.7及以下的版本需要引用手动拷贝到components的包
  }
}

使用组件

1. url 方式播放

<view>
  <!-- 以下是对小程序播放器组件的引用 -->
  <ve-video
    id="videoContainer"
    mode="portrait"
    src="http://xxxx.mp4"
    muted
    loop
  ></ve-video>
</view>

2. vid 方式播放

<view>
  <!-- 以下是对一个播放器组件的引用 -->
  <ve-video
    id='xgVideo'
    className='xg-video'
    mode='small'
    playDomain='https://vod.volcengineapi.com'
    playAuthToken='*****************'
  ></ve-video>
</view>

• playDomain是调用火山引擎视频点播OpenAPI的接口地址，业务方如果做了该接口的代理，可以替换成业务方的地址。使用正式appid调试时需要将该地址配置在小程序服务器域名配置白名单中。
• playAuthToken是获取视频播放信息(包括播放地址，传入此项时不需要传入src)的临时凭证，由业务方服务端通过调用火山服务端SDK本地生成，具体生成参考火山引擎视频点播文档

组件属性

小程序播放器对video原生组件进行了封装，因此支持大部分的video属性配置。以下说明列出了新增属性及差异化属性，列出的部分中以 show- 开头的开关即影响原生组件又影响自定义UI，不在列表中的只影响原生组件：

Property	Type	Default	Required	Description
mode	'portrait' | 'landscape'	'landscape'	No	播放器支持竖屏(portrait)及横屏(landscape)两种播放UI模式。横屏模式偏向于普通的PC视频播放器UI，竖屏视频展示类似抖音等短视频播放模式。
src	string		No
componentId	string		NO	video组件的id，用于通过createVideoContext获取视频VideoContext，不传入则会随机生成一个id，此时视频VideoContext仅能通过组件上下文的getContext方法获取
controls	'custom' | 'native'|'false'	'custom'	No	custom: 自定义UI，native: 原生组件UI，false: 完全关闭播放UI控件（包括自定义UI及原生组件UI），播放UI控件指loading状态、播控按钮、进度条、时间显示等
showFullscreenBtn	boolean		No	当开始/继续播放时触发play事件
duration	number		No	根据官方文档说明，duration属性只是控制显示的时长，不会控制实际播放的时长。因此该属性不设置给原始video组件，只提供给自定义UI使用
playDomain	string		No	调用火山引擎视频点播OpenAPI的接口地址，业务方如果做了该接口的代理，可以替换成业务方的地址
playAuthToken	string		No	获取视频播放信息(包括播放地址，传入此项时不需要传入src)的临时凭证，由业务方服务端通过调用火山服务端SDK本地生成，具体生成方法参考火山引擎视频点播文档
bindplay	eventhandle		No	当开始/继续播放时触发play事件
bindpause	eventhandle		No	当暂停播放时触发 pause 事件
bindended	eventhandle		No	当播放到末尾时触发 ended 事件
bindtimeupdate	eventhandle		No	播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
bindfullscreenchange	eventhandle		No	视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction 有效值为 vertical 或 horizontal
bindwaiting	eventhandle		No	视频出现缓冲时触发
binderror	eventhandle		No	视频播放出错时触发
bindprogress	eventhandle		No	加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比
bindloadedmetadata	eventhandle		No	视频元数据加载完成时触发。event.detail = {width, height, duration}
bindplaybackratechange	eventhandle		No	视频倍速改变完成时触发。返回改变后的倍速值。event.detail={playbackRate}。
bindenterbackground	eventhandle		No	进入小窗播放时触发
bindclosebackground	eventhandle		No	关闭小窗播放时触发
bindleavebackground	eventhandle		No	离开小窗进入 app 事件时触发
bindseeking	eventhandle		No	组件内部代理劫持VideoContext，VideoContext.seek 调用后会立即发送该事件，该事件非video自带事件，只支持 controls="custom" 时才对外发送
bindseekcomplete	eventhandle		No	seek 完成时触发 (position iOS 单位 s, Android 单位 ms)

PS. 原生组件支持的属性配置请参考官方文档：https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/media-component/video

组件接口

小程序播放器对VideoContext进行了封装，提供同原生接口一致的API。原生接口更多细节可阅读官网

let player = null
// 异步获取组件内video的VideoContext
const component = this.selectComponent("#videoContainer", (component) => {
  player = component.getContext()
  // 原生接口
  player.play()
  player.pause()
  player.stop()
  player.seek(10)
  player.requestFullScreen()
  player.exitFullScreen()
  player.setWaterMark({ color: "#FFFF11" })
  player.setMediaVolume({ value: 1})
  player.getMediaVolume(options)
  player.playbackRate(1)
  player.requestFullScreen({ direction: 90 })
  player.exitFullScreen()
});
// 同步获取组件内video的VideoContext，需要保证是在page或者component的ready事件之后才能正常调用
// player = this.selectComponent("#videoContainer").getContext();
// player.play()
// ...

组件事件

小程序播放器对外支持两种方式的事件订阅形式：组件属性配置事件订阅或者通过组件对象进行事件订阅，请选择其中一种进行订阅，尽量不要两者混用。这两种方式在组件实例被从页面节点树移除(lifetimes->detached)时进行事件解绑，不需要业务单独关注事件泄漏问题

1. 组件属性订阅事件

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

2. 组件Context对象订阅事件

小程序播放器提供了接口可以获取player context，并可以对player添加事件订阅。具体方式如下：

let player = null
const component = this.selectComponent("#videoContainer", (component) => {
  player = component.getContext()
  // 事件订阅
  player.on('error', (e) => {
    console.log('event error:', e)
  })
  player.on('timeupdate', (e) => {
    const { currentTime, duration } = e.detail;
    console.log('event error:', currentTime, duration)
  })
  ...
});

事件列表:

EventName	CustomEvent	Description
play	No	参见属性 bindplay 描述
pause	No	参见属性 bindpause 描述
ended	No	参见属性 bindended 描述
timeupdate	No	参见属性 bindtimeupdate 描述
fullscreenchange	No	参见属性 bindfullscreenchange 描述
waiting	No	参见属性 bindwaiting 描述
error	No	参见属性 binderror 描述
progress	No	参见属性 bindprogress 描述
loadedmetadata	No	参见属性 bindloadedmetadata 描述
playbackratechange	No	参见属性 bindplaybackratechange 描述
enterbackground	No	参见属性 bindenterbackground 描述
closebackground	No	参见属性 bindclosebackground 描述
leavebackground	No	参见属性 bindleavebackground 描述
seeking	Yes	参见属性 bindseeking 描述
seekcomplete	No	参见属性 bindseekcomplete 描述

集成播放数据采集sdk

1. 安装上报sdk

# npm
npm i veplayer-mp-logger@latest

# yarn
yarn add veplayer-mp-logger@latest

1. 业务代码中集成

import { CollectorManager } from 'veplayer-mp-wechat/tool/index'
import Collector from 'veplayer-mp-logger'

CollectorManager.setCollector(Collector, {
  appId: 111111,                  // 火山引擎上业务自己的appId
  userId: '7231102214076007992'   // 用户id，没有可以不传入，埋点sdk自动生成
 })

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

<view>
  <!-- 以下是对一个播放器组件的引用 -->
  <ve-video
    id='xgVideo'
    className='xg-video'
    mode='small'
    src="{{src}}",
    logInfo={{logInfo}}
  ></ve-video>
</view>