//創(chuàng)建播放器 
createPlayer(mediaDataSource: Mpegts.MediaDataSource, config?: Mpegts.Config): Mpegts.Player;
//判斷瀏覽器是否支持播放 
isSupported(): boolean;
//獲取播放器特征列表（這個方法我這里沒用，就不過多介紹了，有需要的可以查看官方文檔）
 getFeatureList(): Mpegts.FeatureList;

interface Player {
        destroy(): void;//銷毀播放器
        on(event: string, listener: (...args: any[]) => void): void;//添加監(jiān)聽
        off(event: string, listener: (...args: any[]) => void): void;//取消監(jiān)聽
        attachMediaElement(mediaElement: HTMLMediaElement): void;//綁定dom
        detachMediaElement(): void;//移除dom
        load(): void;//加載播放器
        unload(): void;//取消播放器加載
        play(): Promise<void> | void;//開始播放
        pause(): void;//暫停播放
    }

interface Events {
        ERROR: string;//播放中發(fā)生錯誤
        LOADING_COMPLETE: string;//緩沖完成
        RECOVERED_EARLY_EOF: string;//緩沖期間發(fā)生意外的網(wǎng)絡EOF，但已自動恢復
        MEDIA_INFO: string;//提供媒體的技術信息，如視頻/音頻編解碼器、比特率等。
        METADATA_ARRIVED: string;//提供FLV文件（流）可以包含的元數(shù)據(jù)
        SCRIPTDATA_ARRIVED: string;//提供FLV文件（流）可以包含的腳本數(shù)據(jù)
        STATISTICS_INFO: string;//提供播放統(tǒng)計信息，如丟幀、當前速度等
    }

import mpegtsjs from 'mpegts.js'

import mpegtsjs from 'mpegts.js'
export default {
  data() {
    return {
      isPlaying: false, // 判斷是否正在播放直播
      notSpeedCount: 0,//記錄播放速度為0的次數(shù)
      flvVideo: null, //播放器
    }
  },
  methods: {
    //初始化播放器
    async initVideo(url, videoId) {
      if (!videoId || !url) return
      let that = this;
      const videoElement = document.getElementById(videoId)
      let flvPlayer = mpegtsjs.createPlayer({
        type: 'flv',
        url: url,
        isLive: true,
        cors: true,
        withCredentials: false,
        hasVideo: true,
        hasAudio: false,
        nativeMP4H264Playback: true,
      }, {
        liveBufferLatencyChasing: true, //追幀
      })
      flvPlayer.attachMediaElement(videoElement)
      flvPlayer.load()
      await flvPlayer.play()
      this.flvVideo = flvPlayer
      //監(jiān)聽播放器發(fā)生錯誤
      flvPlayer.on(
        mpegtsjs.Events.ERROR,
        (errorType, errorDetail, errorInfo) => {
          console.log(
            '類型:' + errorType,
            '報錯內(nèi)容' + errorDetail,
            '報錯信息' + JSON.stringify(errorInfo)
          )
        }
      )
      //監(jiān)聽播放信息，該方法會持續(xù)調用
      flvPlayer.on(mpegtsjs.Events.STATISTICS_INFO, (e) => {
        //當播放速度為0時，記錄一下為0的次數(shù)，達到一定次數(shù)時，刷新播放器，重新拉取視頻流；偶爾卡頓一下不用處理，這里要處理的是長時間拉取不到流，防止鏈接斷開
        if (e.speed == 0) {
          console.log('直播信息：' + JSON.stringify(e))
          if (that.notSpeedCount > 10) {
            that.notSpeedCount = 0
            that.refreshVideo(url,videoId)
            that.isPlaying = false
          } else {
            that.notSpeedCount += 1
          }
        } else {
          if (!that.isPlaying) {
            that.isPlaying = true
            flvPlayer.play()
          }
          that.notSpeedCount = 0
        }
      })
    },
    //銷毀
    destoryVideo() {
      if (this.flvVideo) {
        this.flvVideo.pause()
        this.flvVideo.unload()
        this.flvVideo.detachMediaElement()
        this.flvVideo.destroy()
        this.flvVideo = null
      }
    },
    //刷新播放器
    refreshVideo(url,videoId) {
      if(!url || !videoId) return
      this.destoryVideo()
      setTimeout(() => {
        this.initVideo(url,videoId)
      }, 500);
    }
  },
}