騰訊視訊播放插件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