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

​

 

官方网站：https://m.v.qq.com/txp/v3/src/jsapi/demos.html

腾讯视频统一播放器是视频应用于全平台播放(电脑，手机，平板电脑，电视[Sumsang],支持点播和直播,支持自定义插件的JavaScript框架。

 

基础使用

// html<div id="mod_player"></div>​// jsvar player = new Txplayer({    containerId: 'video_tag',    vid: 'r0018hmh1pa',    width: '100%',    height: screen.availHeight / 2,    // poster: obj.pic 视频封面地址    // 自动播放    autoplay: false,});var _playStatus = obj.playStatus;

下面是一些方法的踩坑记录

player.on('ready', () => { // 初始化使用下面的方法时必须先声明这个，不管里面写不写内容​});

var temp = 'a'player.on('timeupdate', (parmas) => {    if (temp == 'a') { // 此方法用于让视频跳转到指定位置播放    // 虽然player提供了seekTo方法用于跳转到指定位置    // 但是在4G环境下此方法无效，只能采用下列方法解决        setTimeout( () => { // 部分机型在4G下不加定时器，也无法跳转            parmas.videoTag.currentTime = 200        }, 500)        temp = 'b'    }    if (player.getCurrentTime() == player.getDuration()) { // 用于播放结束触发时间            }​    if (parmas.videoTag.currentTime >= obj.delayTime) { // 用于在播放到指定时间调用下列事件            }});​

Txplayer支持的事件

• 事件监听: 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