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>