hls.js实现播放直播视频

vue 后台管理系统要实现观看直播

1.下载
npm install hls.js --save
2.上代码

<!-- muted 默认静音 autoplay自动播放 -->
 <video ref="video" muted controls style="width: 80%;"></video>

import Hls from 'hls.js';

 // 播放直播视频流m3u8
      this.$nextTick(() => {
        const video = this.$refs.video;
        if (Hls.isSupported()) {
        this.hlsAll = new Hls();
        this.hlsAll.loadSource('你的视频路径');//列如 'https://gcalic.v.myalicdn.com/gc/zjjmht_1/index.m3u8'
        this.hlsAll.attachMedia(video);
        this.hlsAll.on(Hls.Events.MANIFEST_PARSED, () => {
            video.play();
          });
        } else if (video.canPlayType('application/vnd.apple.mpegURL')) {
          video.src ='你的视频路径';//列如 'https://gcalic.v.myalicdn.com/gc/zjjmht_1/index.m3u8'
          video.addEventListener('loadedmetadata', () => {
            video.play();
          });
        }
      });

//----------------想关闭 停止推流----------------
  this.hlsAll.stopLoad();
  this.hlsAll.destroy();//销毁