# 一、简介

xgplayer小程序播放器Taro版本。[Taro](https://taro.jd.com/)支持多平台小程序输出: 微信、字节、阿里、百度、QQ、京东。

# 二、快速接入小程序播放器
只需两步：安装、引入、即可完成小程序播放器组件的使用。

## 安装

```
# 最新稳定版
$ npm install xgplayer-mp-taro
```

## 引入组件

```javascript
import { XgVideo } from 'xgplayer-mp-taro'
```

## 使用组件

### 1. url 方式播放

```tsx
<XgVideo
  className='xg-video'
  mode='small'
  autoplay
  src='https://playertest.longtailvideo.com/adaptive/aes-with-tracks/master.m3u8'
  description=''
  picture-in-picture-mode={['push', 'pop']}
  loop
></XgVideo>
```

### 2. [vid 方式播放](https://www.volcengine.com/docs/4/68693#vid-playauthtoken-%E6%92%AD%E6%94%BE)

```tsx
<XgVideo
  className='xg-video'
  mode='small'
  playDomain='vod.bytedanceapi.com'
  playAuthToken='*****************'
></XgVideo>
```

## XgVideoProps

| Property | Type | Default | Required | Description |
|----------|------|---------|----------|-------------|
|   id     |   string   |         |     No     |             |
|      mode    |   'short' / 'small'   |         |     Yes     |   该播放器支持小视频及短视频两种播放UI模式，小视频模式偏向于普通的PC视频播放器UI，短视频适合竖屏视频展示。具体样式可参考DEMO       |
|      src    |   string   |         |     No     |      播放地址，优先级高于playAuthToken参数     |
|      playDomain    |   string   |         |      No    |             |
|      playAuthToken    |   string   |         |    No      |     生成方式可参考[火山引擎文档](https://www.volcengine.com/docs/4/68693#vid-playauthtoken-%E6%92%AD%E6%94%BE)        |
|      loop    |   boolean   |     false    |     No     |     循环播放        |
|      muted    |   boolean   |     false    |     No     |      默认静音       |
|      autoplay    |   boolean   |     false    |     No     |     自动播放        |
|      playbackRateList    |   number[]   |     false    |     No     |    默认值：[0.5, 0.8, 1.0, 1.25, 1.5]，可参考各家小程序对于数值的约定         |
|      definition    |   number   |     false    |     No     |     默认清晰度      |
|      definitionList    |   IDefinition[]   |     false    |     No     |     清晰度档位列表      |

### Types

```Typescript
interface IDefinition {
  url: string
  quality: number
  text:
    | string
    | {
        [propName: string]: any
      }
  iconText?:
    | string
    | {
        [propName: string]: any
      }
}
```