1、安装Hls

Vue.js是一个适用于构建用户界面的渐进型框架，它的流行程度已经在现代Web应用开发领域中得到了广泛的认可。而HLS（HTTP Live Streaming）则是一种广泛应用于视频流媒体传输的协议，可以将一个长时间的视频分解为一个个小的TS（Transport Stream）片段进行传输，客户端也可以根据网络状况切换不同的码率。本文将结合Vue.js和HLS协议实现一个Vue Hls的例子。

首先，我们需要在Vue项目中引入hls.js，HLS.js是一个开源的JavaScript库，它实现了解析HLS流并支持HTML5类型的视频播放器。我们可以通过npm install命令安装，也可以在index.html文件中直接引入。下面是通过npm安装示例代码

npm install hls.js --save

2、接着，在Vue项目中构建视频播放器组件，并在其中使用hls.js进行视频流的播放。下面是相关的代码实现：

<script>
import Hls from 'hls.js';
export default { 
    name: 'VueHlsPlayer', 
    props: { 
        url: { 
            type: String, 
            required: true 
        } 
    }, 
    data() { 
        return { 
            hls: null, 
            src: '' 
        } 
    }, 
    mounted() { 
        if (Hls.isSupported()) {
             this.hls = new Hls(); 
             this.hls.loadSource(this.url); 
             this.hls.attachMedia(this.$refs.video); 
             this.hls.on(Hls.Events.MANIFEST_PARSED, () => { this.$refs.video.play(); }); 
        } 
        else if (
            this.$refs.video.canPlayType('application/vnd.apple.mpegurl')) 
            { 
                this.$refs.video.src = this.url; 
                this.$refs.video.addEventListener('loadedmetadata', () => { 
                    this.$refs.video.play(); }); 
            } 
            this.src = this.url;
         }, 
        destroyed() { 
            if (this.hls) {
                 this.hls.destroy();
            } 
        } 
    } 
</script>

在上述代码中，我们首先引入了Hls.js库，并且在Vue组件中定义了一个video标签，然后通过mounted钩子函数实现了视频的加载、播放和销毁。具体地说，如果浏览器支持Hls，我们就创建一个新的Hls实例，然后通过loadSource方法加载视频源文件。之后，我们通过attachMedia方法将video元素绑定到Hls实例上。最后，在ManifestParsed事件触发后，我们可以调用video元素的play方法开始播放视频。如果浏览器不支持Hls，则通过video元素的src属性来加载视频资源，当元数据加载完成后，也调用video元素的play方法来启动视频。

领C++音视频学习资料→「链接」

最后，我们可以在Vue应用中使用VueHlsPlayer组件来实现视频的播放。下面是示例代码：

    <VueHlsPlayer :url="url" />
</template>
<script>
import VueHlsPlayer from '@/components/VueHlsPlayer.vue';
export default {
    name: 'App',
    components: {
        VueHlsPlayer
    },
    data() {
        return {
            url: 'http://example.com/path/to/video.m3u8'
        }
    }
}
</script>

通过上述代码即可实现Vue.js和HLS协议的结合，以实现视频流的播放。当然，具体的应用场景和流程取决于实际开发需求，但可以肯定的是，本文所提供的示例代码可以作为一个很好的参考，帮助你更好地理解Vue.js和HLS协议的结合。

3、遍历渲染多个视频播放

<template>
  <div class="monitorWarp">
    <div class="monitorItem">
      <div class="item" v-for="(item, index) in videoList" :key="index">
        <video
          :ref="['videoElement' + index]"
          controls
          muted
          preload="auto"
          style="width:100%;height:100%; fit:fill;"
        ></video>
      </div>
    </div>
  </div>
</template>
<script>
import { getRealMonitor } from "../api.js";
import Hls from "hls.js";
export default {
  data() {
    return {
      videoList: []
    };
  },
  created() {},
  computed: {},
  mounted() {
    this.RealMonitor();
   
  },
  methods: {
    RealMonitor() {
      getRealMonitor(this.params).then(res => {
        console.log(res, "实时监控");
        this.videoList = res.result;
        this.videoList.forEach((item, index) => {
          console.log(item);
          this.showVideo(item, "videoElement" + index);
        });
      });
    },
    showVideo(url, refId) {
      console.log(url, refId, "节点");
      let video = refId; //定义挂载点
      this.hlsjs = new Hls();
      this.hlsjs.loadSource(url);
      this.hlsjs.attachMedia(video);
      this.hlsjs.on(Hls.Events.MANIFEST_PARSED, () => {
        video.play();
      });
      this.hlsjs.on(Hls.Events.ERROR, (event, data) => {
        console.log(event, data);
        // 监听出错事件
        console.log("加载失败");
      });
    }
  }
};
</script>
<style lang="less" scoped>
.monitorWarp {
  .monitorItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    .item {
      width: 224px;
      height: 168px;
      background-color: #143354;
      margin-top: 2px;
      border: solid 2px #2677f1;
    }
  }
}
</style>

4、vue+原生

通过上述代码即可实现Vue.js和HLS协议的结合，以实现视频流的播放。当然，具体的应用场景和流程取决于实际开发需求，但可以肯定的是，本文所提供的示例代码可以作为一个很好的参考，帮助你更好地理解Vue.js和HLS协议的结合。