jiker-tcplayer

基于腾讯Web播放器SDKTcPlayer 封装的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文档