wvp/web_src/src/components/common/mpegtsVideo.vue

<template>
  <div class="play-box" >
    <div class="play-container"
         :style="`background-color: ${bgColor}`">
      <video class="player" ref="video" ></video>
    </div>
    <div v-if="controller" class="play-control ">
      <div class="mx-2">
        <div class="play-btn" @click="play" v-if="!isPlay" :disabled="!isPush">
          {{ $t('play') }}
        </div>
        <div class="play-btn" @click="pause" v-else :disabled="!isPush">暂停</div>
      </div>
      <div class="play-btn" @click="replay" >{{ $t('play') }}重新加载</div>
    </div>
  </div>
</template>

<script>
import mpegTs from 'mpegts.js';
import copy from '@/until/copy'
import {sleep} from "@/until/time";

let videoPlayer = null;
export default {
  name: "mpegTsVideo",
  props:{
    isPush:{},
    controller: {default:false},
    bgColor: {
      default: "#000"
    }
  },
  data(){
    return {
      isOk: true,
      isPlay: false,
      loading: false,
      playUrl: '',
      videoPlayer: null,
      tips: '',
      fps: 30,
      hasAudio: false,
    }
  },
  beforeDestroy() {
    this.destroyVideo();
  },
  methods:{
    copyUrl(){
      copy(this.playUrl).then(()=>{
        this.$message.success('复制成功');
      }).catch(err=>{
        this.$message.error('复制失败,请手动尝试复制');
      })
    },
    async setPlayUrl(playUrl){
      this.playUrl = playUrl;
      await this.initVideo();
    },
    // 初始化视频播放组件
    async initVideo(){
      //清除
      if(!this.playUrl){
        return this.$message.warning('请先进行推流')
      }
      this.isPlay = false;
      if(videoPlayer){
        this.destroyVideo();
        console.log(1)
        // 等待2秒
        await sleep(2 * 1000);
      }
      console.log(2)
      // 设置直播地址
      let player = mpegTs.createPlayer({
        type: 'mse',  // could also be mpegts, m2ts, flv
        isLive: true,
        url: this.playUrl,
        liveBufferLatencyMaxLatency: 0.5,
        enableWorker: true,
        enableStashBuffer: true,
        hasAudio: this.hasAudio,
        fps: this.fps,
        fixAudioTimestampGap: false
      });
      let videoEl = this.$refs.video;
      // console.log(videoEl);
      player.attachMediaElement(videoEl);
      player.load();
      player.on(mpegTs.Events.ERROR,(err)=>{
        // console.log('---------------------------');
        // console.log('------------err---------------');
        // console.log('err');
        // console.log(err);
        this.$emit('error',err);
      })

      player.on(mpegTs.Events.MEDIA_INFO, (obj)=>{
        console.log(`media_info`);
        console.log(obj);
      })
      videoPlayer = player;
    },
    destroyVideo(){
      if(videoPlayer){
        console.log(`[销毁播放器] `);
        videoPlayer.pause();
        videoPlayer.unload();
        videoPlayer.detachMediaElement();
        videoPlayer.destroy();
        videoPlayer = null;
      }
    },
    async play(url,hasAudio = false,fps = 30){
      if(url){
        console.log(`[播放] 播放新url链接,初始化播放器 hasAudio:${hasAudio} fps:${fps}`);
        this.hasAudio = hasAudio;
        this.fps = fps || 30;
        await this.setPlayUrl(url);
      }
      console.log(`[播放] 继续播放视频`);
      this.isPlay = true;
      videoPlayer.play();

    },
    pause(){
      if(!videoPlayer){
        console.log(`[暂停] 播放器未初始化`)
        return false;
      }
      this.isPlay = false;
      videoPlayer.pause();
    },
    async replay(){
      await this.initVideo();
      await this.play();
    },
    checkBrowser(){
      // 检查浏览器是否支持
      if(videoPlayer){
        return videoPlayer.isSupported();
      }else{
        return null;
      }
    }
  }
}
</script>

<style scoped >
.play-box{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.play-box .play-container{
  width: 100%;
  height: 100%;
  position: relative;
}
.play-box .play-container > video{
  width: auto;
  height: 100%;
}
.play-box .play-control{
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
  height: 40px;
  display: flex;
  background-color: rgba(0,0,0,0.5);
  align-items: center;
  transition: bottom 0.3s;
}
.play-box:hover .play-control{
  bottom: 0;
}
.play-btn{
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 5px;
  background-color: #b0c2d5;
  color: #fff;
  cursor: pointer;
  margin: 0 5px;
}
.play-btn:hover{
  background-color: #66b1ff;
}


</style>