一、简介
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>
vid 方式播放
2.<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
}
}