npm install --save mpegts.js
import mpegts from 'mpegts.js';

     <video
      ref="videoPlayer"
      muted="muted">
      </video>

<div class="box">
    <video
      ref="videoPlayer"
      muted="muted">
      </video>
    <div class="model">
      <button>開始播放</button>
    </div>
  </div>
  
——————

const video = this.$refs.videoPlayer

const model = document.querySelector('.model')
const btn = document.querySelector('button')
// 第一種方法 引導用戶去與頁面交互實現(xiàn)播放
async function play() {
  try {
    await video.play();
    //使用await的原因是因為video.play()方法返回的是一個Promise,所以在這里我們可以對他進行一些處理
    model.style.display = 'none';
    btn.removeEventListener('click', play);
    // 如果他自動播放了就隱藏按鈕，消除點擊事件
  } catch (err) {
    model.style.display = 'block';
    btn.addEventListener('click', play);
    // 如果Promise返回的是error就引導用戶點擊按鈕，在調用play方法
  }
}
play();

//第二種方法比較主流，類似的有網(wǎng)頁版抖音以及B站
function play() {
  video.muted = true;//設置視頻為靜音
  video.play();//調用播放方法
  const ctx = new AudioContext();
  const canAutoPlay = ctx.state === 'running'; //通過這個可以判斷出視頻能不能夠自動播放 如何可以它的值就是“running” 否則為"suspended"
  // 如果是不能播放我們就執(zhí)行下面的邏輯，其實就是類似于第一種方法，讓用戶與其交互
  ctx.close();
  if (canAutoPlay) {
    video.muted = false;
    model.style.display = 'none';
    btn.removeEventListener('click', play);
  }
  else {
    model.style.display = 'block';
    btn.addEventListener('click', play);
  }
}
play()

    data() {
    return {
      player: null,
    };
   },

——————
   
    createPlayer(url) {
      if (mpegts.isSupported()) { //判斷瀏覽器是否支持播放
        if (this.player) {
          this.destory();
        }
        this.player = mpegts.createPlayer( //創(chuàng)建一個播放器實例
          {
            type: "flv",//播放的格式 flv mp4 ts mse等
            url,
            isLive: true, //指示數(shù)據(jù)源是否為直播流
            isAutoPlay: true,//是否自動播放
            isContinue: true, //是否循環(huán)播放
            lazyLoad: true,//如果有足夠的數(shù)據(jù)進行播放，則終止http連接
            hasAudio: false,//聲音關閉，如果傳來的視頻流沒有聲音，就一定要設置這個參數(shù)，否則會報錯
          },
          {
            enableWorker: true,//是否啟用分離線程
            enableStashBuffer: false,//是否關閉IO隱藏緩沖區(qū)
            stashInitialSize: 128,//IO存儲緩沖區(qū)初始大小，默認為384kb
          }
        );

        this.player.attachMediaElement(this.$refs.videoPlayer); //將播放器注冊到Video節(jié)點
        this.player.load(); //加載
        setTimeout(() => {
          this.player
            .play()
            .then(() => {
              console.log("播放");
            })
            .catch((err) => {
              console.log("err", err);
            });
        });
      }
    },

    destory() {
      if (this.player) {
        try {
          this.player.pause(); //暫停播放
          this.player.unload();//取消數(shù)據(jù)流加載
          this.player.detachMediaElement();//將播放實例從節(jié)點中取出
          this.player.destroy(); //銷毀
          this.player = null;
        } catch (e) {
          // console.log(e);
        }
      }
    },