# xt-video一款简单好用的视频播放器组件

## 简介

当前仅支持H5版本，后续会不断更新迭代。如果有什么需求，可在评论区留言。发布该版本主要是为了公司项目使用。

## 基本用法

```html
<template>
	<view class="index">
		<xt-video
			video-id="video"
			src="xxx"
			poster="xxx"
		/>
	</view>
</template>
```

## props

| 属性名 | 类型 | 默认值 | 说明 |
|:-:|:-:|:-:|:-:|
| videoId | String | | 必填，视频唯一id |
| width | String | 100% | 视频宽度，默认100% |
| height | String | 400rpx | 视频高度，默认422rpx |
| src | String | | 视频播放地址 |
| poster | String | | 视频封面 |
| autoplay | Boolean | false | 是否自动播放，默认false，由于浏览器限制，如果想要自动播放时，muted也要设置为true |
| loop | Boolean | false | 是否循环播放视频 |
| muted | Boolean | false | 是否静音播放 |
| initialTime | Number | 0 | 指定视频初始播放位置，单位秒（s） |
| duration | Number | | 指定视频总时长，单位秒（s） |
| activeColor | String | #03A3F8 | 进度条选中颜色 |
| title | String |  | 视频标题 |
| customFullscreen | Boolean | false | 是否自定义视频全屏功能 |
| ratios | Array | [] | 多分辨率视频播放数组，对象数组内容详见下方 |
| ratioDefaultId | [String, Number] | null | 设置默认播放的分辨率id，如果设置了该属性，则src属性必须为对应分辨率id的视频地址 |
| episodes | Array | null | 选集数组，对象数组内容详见下方 |
| epiDefaultId | [String, Number] | null | 设置默认播放第几集，在设置默认播放src时，也需要设置默认播放第几集的id |
| vipBgColor | String | #FF5345 | 设置集数时，vip标签的背景色 |
| vipFontColor | String | #FFFFFF | 设置集数时，vip标签的文字颜色 |
| navHeight | Number | 44，单位px | 上导航的高度，用于视频全屏时，如果存在导航栏，导致选集弹框展示不全问题 |
| showSpeed | Boolean | false | 是否显示倍速播放按钮 |
| speeds | Array | 具体数组见下方 | 设置倍速播放，支持的倍率有 0.5/0.8/1.0/1.25/1.5。微信基础库2.6.3 起支持 2.0 倍速 |

### 属性speeds数组的默认值

```js
[
	{ rate: 0.5, name: '0.5x' },
	{ rate: 0.8, name: '0.8x' },
	{ rate: 1.0, name: '1.0x' },
	{ rate: 1.25, name: '1.25x' },
	{ rate: 1.5, name: '1.5x' },
	{ rate: 2.0, name: '2.0x' }
]
```

### 属性ratios为一个对象数组，其有效值如下：
| 属性名 | 类型 | 默认值 | 说明 |
|:-:|:-:|:-:|:-:|
| id | [String, Number] | | 必填，分辨率的唯一id |
| url | String |  | 不同分辨率的视频地址 |
| name | String |  | 必填，分辨率名称，例如：标清 |

### 属性episodes为一个对象数组，其有效值如下：
| 属性名 | 类型 | 默认值 | 说明 |
|:-:|:-:|:-:|:-:|
| id | [String, Number] | | 必填，集数的唯一id |
| url | String |  | 不同集数的视频地址 |
| name | String |  | 必填，集数名称，例如：1/第一集等 |
| isVip | String |  | 是否是vip |

### 注意：
分辨率和集数的url都不是必填项，根据你们后端提供的视频地址来自己确定即可。有可能需要前端自己拼写不同分辨率，不同集数的视频地址。

## 事件
| 事件名 | 类型 | 说明 |
|:-:|:-:|:-:|
| @onFullscreen | Function | customFullscreen为true时生效，自定义全屏事件，返回Boolean，是否全屏 |
| @onExitFullscreen | Function | customFullscreen为true时生效，自定义退出全屏事件，返回Boolean，是否全屏 |
| @onChangeRatio | Function | 切换分辨率时的回调，返回当前分辨率对象 |
| @onChangeEpi | Function | 切换集数时的回调，返回当前第几集对象 |

## 方法，通过$refs进行调用
| 方法名 | 说明 | 参数 |
|:-:|:-:|:-:|
| xtVideoReload | 改变视频地址后，重新加载视频 | 接收一个对象，对象属性{url: String,要切换的视频地址， startTime: Number,视频播放的初始时间}均为非必填 |

## 示例代码：

```vue
<template>
	<view class="index">
		<xt-video
			ref="xtVideoRef"
			video-id="video"
			src="xxx"
			poster="xxx"
			:episodes="episodes"
			:ratios="ratios"
			@onChangeRatio="handleChangeRatio"
			@onChangeEpi="handleChangeEpi"
		/>
	</view>
</template>
<script>
export default {
	data() {
		return {
			ratios: [
				{ 
					id: '480p',
					url: 'xxx.mp4',
					name: '标清'
				},
				{
					id: '720p',
					url: 'xxx1.mp4',
					name: '高清'
				},
				{
					id: '1080p',
					url: 'xxx2.mp4',
					name: '超清'
				}
			],
			episodes: [
				{
					id: '1',
					url: 'xxx.mp4',
					name: '1',
					isVip: false
				},
				{
					id: '2',
					url: 'xxx.mp4',
					name: '2',
					isVip: false
				},
				{
					id: '3',
					url: 'xxx.mp4',
					name: '3',
					isVip: true
				}
			]
		},
		methods: {
			// 自定义切换分辨率方法
			handleChangeRatio(item) {
				this.$refs.xtVideoRef.xtVideoReload({
					url: item.url
				})
			},
			// 自定义切换集数方法
			handleChangeEpi(item) {
				this.$refs.xtVideoRef.xtVideoReload({
					url: item.url,
					startTime: 0
				})
			}
		}
	}
}
</script>
```