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文档