Vue使用hls.js拉流播放m3u8格式的视频流

1.如果需要连接现场的局域网，可以先使用EasyConnect连接VPN，使用设备所在的内网 

(俺的资源列表有EasyConnect)

2.使用VLC先测试视频流是否存在问题   

(俺的资源列表有VLC)

3.进行代码编写

  01-下载hls.js    

npm install hls.js
yarn add hls.js

 02-在页面进行引入

import hlsjs from 'hls.js'

03-编写html部分代码

04-编写js代码 

   //播放
   show() {
      this.video = this.$refs.videoElement; //定义挂载点
      console.log(this.video);
      if (hlsjs.isSupported()) {
        this.hlsjs = new hlsjs();
        this.hlsjs.loadSource(
          "这里书写路径地址 例:http://192.168.1.1/live/abc.m3u8"
        );
        this.hlsjs.attachMedia(this.video);
        console.log(this.hlsjs);
        this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => {
          this.video.play();
          console.log("加载成功");
        });
        this.hlsjs.on(hlsjs.Events.ERROR, (event, data) => {
          //   console.log(event, data);
          // 监听出错事件
          console.log("加载失败");
        });
      } else {
        this.$message.error("不支持的格式");
        return;
      }
    },
    //停止播放
    closeVideo() {
      if (this.hlsjs) {
        this.$refs.videoElement.pause();
        this.video.pause();
        this.hlsjs.destroy();
        this.hlsjs = null;
        this.$emit("closeVideo");
      }
    },

4.如果vlc能播放，网页上却播放不了，有可能以下问题

1.确认地址是否拼接有误
2.查看连接的端口是否连通
3.由于部分浏览器不支持视频压缩技术,因此如果前端设备是H2645编码的话，需要改为H264编码     这个很可能出错