腾讯视频播放插件Txplayer的使用

欢迎使用Markdown编辑器

腾讯视频统一播放器是视频应用于全平台播放(电脑，手机，平板电脑，电视[Sumsang],支持点播和直播,支持自定义插件的JavaScript框架。官方网站：[http://m.v.qq.com/txp/v3/][3]

使用方法

1. 引包；
2. 创建一个dom元素；
3. 创建播放器；

<div id="container"></div>

<script src="https://vm.gtimg.cn/tencentvideo/txp/js/txplayer.js"></script>
<script type="text/javascript">
      var player=new Txplayer({
     	 //创建dom元素的id:
          containerId:'container',
          //视频id:
          vid:'r086384dtzw',
          //视频播放器的宽度
          width:'1000',
          //视频播放器的高度
          height:'800',
          //是否自动播放
          autoplay:true
      })

  	// 调用api：
  	player.pause(); // 暂停播放
  	player.mute(); // 视频静音
  	
  	// 事件监听
  	player.on('ready', function(){
  		...
  	}); // 初始化完成
  	
  	player.on('volumeChange', function(){
  		...
  	}); //音量发生变化
  	
</script>      

提供的API

seekTo

跳到指定时间点播放

//跳到15s的播放位置：
player.seekTo(15)

getPlayerState

获取视频播放状态；
返回值包括：
-1（未开始）
0（已结束）
1（正在播放）
2（已暂停）
3（正在缓冲）

player.getPlayerState()

getCurrentTime

获取视频播放时间点；；

//返回秒数，比如15
player.getCurrentTime();

支持的事件

事件监听: player.on(eventName, callback)
事件触发: player.trigger(eventName, args)
事件取消: player.off(eventName, [callback])
事件监听一次: player.once(eventName, callback)

事件列表

事件监听

ready ：播放器初始化完成
error ：播放出错
volumeChange ：音量发生变化
timeupdate 在ready之后监听 ：播放时间点变化
playStateChange ：播放状态变化
definitionChange ：清晰度发生变化
vidChange ：播放的视频发生变化
smallWindowModeChange ：进入或退出小窗口模式
showUIVipGuide ：显示vip付费浮层
browserFullscreenChange ：浏览器全屏状态变化
windowFullscreenChange ：系统全屏状态变化
adStart ：广告开始
adEnd ：广告结束
languageSet ：语言切换完成
showLoginGuide ：清晰度切换720p时，要求登录，此时会触发这个事件，使用方需要监听此事件，处理登录逻辑，对应的api ：closeLoginGuide

事件触发

1080pVipGuideClose ：页面通知播放器付费浮层关闭

player.trigger('1080pVipGuideClose', {
 action: 'closeSkipAd'
})

取消监听

// 取消volumeChange事件监听
player.off('volumeChange');
// 取消pause事件监听
player.off('pause');