vue使用mpegts.js的详细步骤记录

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')
// 第一种方法 引导用户去与页面交互实现播放
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();

//第二种方法比较主流，类似的有网页版抖音以及B站
function play() {
  video.muted = true;//设置视频为静音
  video.play();//调用播放方法
  const ctx = new AudioContext();
  const canAutoPlay = ctx.state === 'running'; //通过这个可以判断出视频能不能够自动播放 如何可以它的值就是“running” 否则为"suspended"
  // 如果是不能播放我们就执行下面的逻辑，其实就是类似于第一种方法，让用户与其交互
  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( //创建一个播放器实例
          {
            type: "flv",//播放的格式 flv mp4 ts mse等
            url,
            isLive: true, //指示数据源是否为直播流
            isAutoPlay: true,//是否自动播放
            isContinue: true, //是否循环播放
            lazyLoad: true,//如果有足够的数据进行播放，则终止http连接
            hasAudio: false,//声音关闭，如果传来的视频流没有声音，就一定要设置这个参数，否则会报错
          },
          {
            enableWorker: true,//是否启用分离线程
            enableStashBuffer: false,//是否关闭IO隐藏缓冲区
            stashInitialSize: 128,//IO存储缓冲区初始大小，默认为384kb
          }
        );

        this.player.attachMediaElement(this.$refs.videoPlayer); //将播放器注册到Video节点
        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();//取消数据流加载
          this.player.detachMediaElement();//将播放实例从节点中取出
          this.player.destroy(); //销毁
          this.player = null;
        } catch (e) {
          // console.log(e);
        }
      }
    },