vue 直播播放器 mpegts.js

名称	类型	说明
type	string	支持媒体类型：`'mse'`, `'mpegts'`, `'m2ts'`, `'flv'` or `'mp4'`
isLive	boolean	是否直播
cors	boolean	是否启用cors对http进行提前
withCredentials	boolean	是否启用cookie对http进行提前
hasAudio	boolean	是否有音频轨道
hasVideo	boolean	是否有视频轨道
duration	number	媒体持续时间（单位毫秒）
filesize	number	媒体大小
url	string	播放地址：支持http(s)或者ws(s)

config:

名称	类型	说明
isLive	boolean	是否开启直播，和mediaDataSource中的 isLive一样
liveBufferLatencyChasing	boolean	开启追帧，减小延迟
liveBufferLatencyMaxLatency	number	最大缓冲延迟，默认1.5s
liveBufferLatencyMinRemain	number	最小缓冲延迟，默认0.5s

这个就写这几个用到的，其他的可以到文档中查看

播放器

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;//提供播放统计信息，如丢帧、当前速度等

}

二、使用

1、安装

npm install mpegts.js

或

yarn add mpegts.js

2、引用

import mpegtsjs from 'mpegts.js'

3、创建播放器

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);
    }
  },
}