Skip to content

基于腾讯开源的超级播放器封装的vue播放器组件

Notifications You must be signed in to change notification settings

DavisYao88/super-tcplayer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

super-tcplayer

基于腾讯web超级播放器封装的vue播放器组件

Build Setup

##组件下载及安装 npm install super-tcplayer -S

##组件属性

属性名 类型 是否必须 默认值 说明
width String 视频分辨率宽 播放器父容易宽度
height String 视频分辨率高 播放器父容易宽度
autoplay Boolean true 是否自动播放
progressMarker Boolean false 进度条是否打点
continuePlay Boolean false 是否连续播放
options Object 视频id,appId 只支持视频id(腾讯云){fileID:"sdasads2e21",appID:"asdasda,us:'',t:'',sign:'',exper:''}
muted Boolean true 是否静音播放
playbackRates Array [0.5,1,1.5,1.8] 播放器速率

组件实例方法

方法名 参数 返回值 说明
play 播放视频
pause 暂停播放
getDuration 视频时长(分钟) 返回视频总时长
getCurrentTime 视频播放时长(分钟) 返回视频已经播放的时长
setCurrentTime 视频秒数 设置视频指定进度播放
getPosterImg 封面图地址 获取视频封面图地址
setPosterImg 图片地址(String) 设置封面图
openFullScreen 打开全屏
exitFullScreen 退出全屏
isFullScreen 返回是否全屏 (Boolean)
getResolutionSize 获取视频分辨率尺寸,返回值Object
destroy 销毁播放器实例

##播放器实例

playerTarget   回调参数为播放器实例

##播放器实例回调方法

事件类型 说明
play 已经开始播放,调用 play() 方法或者设置了 autuplay 为 true 且生效时触发,这时 paused 属性为 false
playing 因缓冲而暂停或停止后恢复播放时触发,paused 属性为 false 。通常用这个事件来标记视频真正播放,play 事件只是开始播放,画面并没有开始渲染
loadstart 开始加载数据时触发
durationchange 视频的时长数据发生变化时触发
loadedmetadata 已加载视频的 metadata
loadeddata 当前帧的数据已加载,但没有足够的数据来播放视频的下一帧时,触发该事件
progress 在获取到媒体数据时触发
canplay 当播放器能够开始播放视频时触发
canplaythrough 当播放器预计能够在不停下来进行缓冲的情况下持续播放指定的视频时触发
error 视频播放出现错误时触发
pause 暂停时触发
ratechange 播放速率变更时触发
seeked 搜寻指定播放位置结束时触发
seeking 搜寻指定播放位置开始时触发
timeupdate 当前播放位置有变更,可以理解为 currentTime 有变更
volumechange 设置音量或者 muted 属性值变更时触发
waiting 播放停止,下一帧内容不可用时触发
ended 视频播放已结束时触发。此时 currentTime 值等于媒体资源最大值
resolutionswitching 清晰度切换进行中
resolutionswitched 清晰度切换完毕
fullscreenchange 全屏状态切换时触发

##原始文档 超级播放器文档

##播放器使用示例代码

<tc-player :width="width" 
          :height="height" 
          :options="options" 
          :autoplay="autoplay" 
          :volume="volume"
          @playerTarget="watchPlayer" 
          ref="player">
    </tc-player>
	//部分代码示例
	export default{
		methods:{
			play(){
			  this.$refs.player.play()
			},
			setCurrentTime(){
			   this.$refs.player.setCurrentTime(60*12)
			 },
			 isFullScreen(){
			   console.log(this.$refs.player.isFullScreen());
			 },
			 watchPlayer(player){
				player.on("loadstart",(msg)=>{
					  console.log("开始加载视频了");
				}) 
				player.on("resolutionswitched",(msg)=>{
					console.log("清晰度切换了");
				})
				player.on("pause",(msg)=>{
				  console.log("视频已暂停");
				})
				player.on("error",(msg)=>{
				  console.log(msg);
				})
				player.on("timeupdate",(msg)=>{
				  console.log(msg);
				})
				player.on("ended",(msg)=>{
				  console.log("视频结束了");
				})
			 }
		}
	}

About

基于腾讯开源的超级播放器封装的vue播放器组件

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published