jiker-tcplayer
Version:
tcplayer in Jiker
64 lines (52 loc) • 2.71 kB
Markdown
# 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)