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("视频结束了");
				})
			 }
		}
	}