使用xgplayer视频播放器播放视频时不显示总时长

在项目中使用到了xgplayer来播放视频，官方演示是可以显示总时间的，但自己使用不显示

分析：

首先，打开控制台看看是不是没有总时长这个标签

找到原因了，不是没有总时长，而是把他显示成块级元素换行了！那解决就好办了，改样式吧，在样式表里修改样式把他覆盖掉应该就可以了，但是又有一个问题，你改span标签的样式会不会影响其他地方的样式！还是改插件吧，稳妥点！！

• 首先，编写插件，我这里写在xgTimeCustom.js里

/*自定义播放时长插件*/
export default {
    setXGtimer(myPlayer, duration, util){
        let container = util.createDom('xg-time', `<span class="xgplayer-time-current" style="display:inline-block;">${myPlayer.currentTime || util.format(0)}</span>
            <span style="display:inline-block;color:#fff;">${duration || util.format(0)}</span>`, {}, 'xgplayer-time')
        myPlayer.once('ready', () => {
            if(myPlayer.controls) {
            myPlayer.controls.appendChild(container)
            }
        })
        let onTimeChange = function () {
            if (myPlayer.videoConfig.mediaType !== 'audio' || !myPlayer.isProgressMoving || !player.dash) {
            container.innerHTML = `<span class="xgplayer-time-current" style="display:inline-block;">${util.format(myPlayer.currentTime || 0)}</span>` + `<span style="display:inline-block;color:#fff;">${util.format(duration)}</span>`
            }
        }
        myPlayer.on('durationchange', onTimeChange)
        myPlayer.on('timeupdate', onTimeChange)

        function onDestroy () {
            myPlayer.off('durationchange', onTimeChange)
            myPlayer.off('timeupdate', onTimeChange)
            myPlayer.off('destroy', onDestroy)
        }
        myPlayer.once('destroy', onDestroy)
    }
}

• 禁用它自带的

//引入自定义插件
import xgTimeCustom from '../../lib/xgTimeCustom'

//把它原本的显示时长的time插件给他禁用掉
this.myPlayer = new Player({
    id: 'xgPlayer',
    url: this.videoMsg.url,
    autoplay: true,
    width: '100%',
    height: '100%',
    'x5-video-player-type': 'h5',
    ignores: ['fullscreen','time'], //禁用time插件
    playsinline: true,
    closeVideoTouch: true
})
 // 使用自定义播放时间插件
xgTimeCustom.setXGtimer(this.myPlayer, this.videoMsg.duration, Player.util)

好啦，这样就可以了！其实这个自定义插件跟他原本的插件差别不大，我只是将它的总时长取值和它的样式给改了一下，以上就是解决方案，仅供参考！