vue直播播放器mpegts.js使用方法详解

//创建播放器 
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;//添加监听
        off(event: string, listener: (...args: any[]) => void): void;//取消监听
        attachMediaElement(mediaElement: HTMLMediaElement): void;//绑定dom
        detachMediaElement(): void;//移除dom
        load(): void;//加载播放器
        unload(): void;//取消播放器加载
        play(): Promise<void> | void;//开始播放
        pause(): void;//暂停播放
    }

interface Events {
        ERROR: string;//播放中发生错误
        LOADING_COMPLETE: string;//缓冲完成
        RECOVERED_EARLY_EOF: string;//缓冲期间发生意外的网络EOF，但已自动恢复
        MEDIA_INFO: string;//提供媒体的技术信息，如视频/音频编解码器、比特率等。
        METADATA_ARRIVED: string;//提供FLV文件（流）可以包含的元数据
        SCRIPTDATA_ARRIVED: string;//提供FLV文件（流）可以包含的脚本数据
        STATISTICS_INFO: string;//提供播放统计信息，如丢帧、当前速度等
    }

import mpegtsjs from 'mpegts.js'

import mpegtsjs from 'mpegts.js'
export default {
  data() {
    return {
      isPlaying: false, // 判断是否正在播放直播
      notSpeedCount: 0,//记录播放速度为0的次数
      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
      //监听播放器发生错误
      flvPlayer.on(
        mpegtsjs.Events.ERROR,
        (errorType, errorDetail, errorInfo) => {
          console.log(
            '类型:' + errorType,
            '报错内容' + errorDetail,
            '报错信息' + JSON.stringify(errorInfo)
          )
        }
      )
      //监听播放信息，该方法会持续调用
      flvPlayer.on(mpegtsjs.Events.STATISTICS_INFO, (e) => {
        //当播放速度为0时，记录一下为0的次数，达到一定次数时，刷新播放器，重新拉取视频流；偶尔卡顿一下不用处理，这里要处理的是长时间拉取不到流，防止链接断开
        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);
    }
  },
}