# jiker-tcplayer

> 基于腾讯Web播放器SDK*TcPlayer* 封装的vue播放器组件

## Usage

#### 下载安装
```npm install jiker-tcplayer```

#### main内引入
```
import j-video from 'jiker-tcplayer'

Vue.use(j-video)
```

#### 直接在页面使用
```
<j-video :id="tc-player-id" :options="options" autoplay/>
```

## 属性
   
|  属性名       | 类型      | 是否必须  |   默认值    |  说明           |
| ------------ | -------   | -------- |------------ | ------------   |
| id        |  String   |  是      | 无 |  播放器唯一指定id |
| width        |  [Number, String]   |  否      | 414 |  播放器宽度 |
| height       |   [Number, String]  |  否      | 270 |  播放器高度 |
| autoplay     |  Boolean  |  否      | false        |  是否自动播放     |
|muted		   |  Boolean  |  否		 | false  	   |   是否静音播放		|      
|loop  |  Boolean  |  否      | false       |  是否循环播放     |  
|playbackRates |  Array	   |  否      | [0.5,1,1.5,1.8]|播放器速率		|
|options       |  Object   |  是      | 无      |  例：{fileID:"3701925921299637010",appID:"1500005696",psign: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5NiwiZmlsZUlkIjoiMzcwMTkyNTkyMTI5OTYzNzAxMCIsImN1cnJlbnRUaW1lU3RhbXAiOjE2MjY4NjAxNzYsImV4cGlyZVRpbWVTdGFtcCI6MjYyNjg1OTE3OSwicGNmZyI6InByaXZhdGUiLCJ1cmxBY2Nlc3NJbmZvIjp7InQiOiI5YzkyYjBhYiJ9LCJkcm1MaWNlbnNlSW5mbyI6eyJleHBpcmVUaW1lU3RhbXAiOjI2MjY4NTkxNzksInN0cmljdE1vZGUiOjJ9fQ.Bo5K5ThInc4n8AlzIZQ-CP9a49M2mEr9-zQLH9ocQgI"}|

## 组件实例方法

|   方法名		   |参数   		|返回值   		|说明   		  |
| ------------ 	 | ------------ |------------ | ------------ |
| play  		 | 无  		   |  	无	     |播放视频 		 |
| pause 		 | 无 		   |  	无	     |暂停播放 		 |
| getDuration    | 无   	       |返回视频总时长|
| getCurrentTime |  无 		   |返回视频已经播放的时长|
| setCurrentTime  |  时间(分)	 |   无				|设置视频指定进度播放|
| setPosterImg  |  图片地址(String) | 无  			  |设置封面图|
| openFullScreen |无   | 无  |打开全屏|
| exitFullScreen  | 无  |无   |退出全屏|
| isFullScreen  |  无 | 无  |返回是否全屏 (Boolean)|
|getResolutionSize|无|无|获取视频分辨率尺寸,返回值{width,height}|
|destroy		|无|无|销毁播放器实例|
```
@ready  //组件抛出初始化回调 
```

## 封装 键盘事件
|   键位		   |作用     		|
| ------------ |------------ |
| 空格  		 | 播放、暂停  |
| 左 		 | 快退		   |
| 右 		 | 快进 		   |
| 上 		 | 音量提高 		   |
| 下 		 | 音量降低 		   |

## TcPlayer API方法
[TcPlayer文档](https://cloud.tencent.com/document/product/881/30820)