一、简介

xgplayer小程序播放器Taro版本。Taro支持多平台小程序输出: 微信、字节、阿里、百度、QQ、京东。

二、快速接入小程序播放器

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

安装

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

引入组件

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

使用组件

1. url 方式播放

<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 方式播放

<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 | 生成方式可参考火山引擎文档 | | 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

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