vue + hls.js直播

1.安装hls.js依赖

通过npm安装依赖 npm install hls.js --save

2.代码实现

有几个需要注意的地方

• 初始化函数需要在页面加载完之后执行，所以可以看到loadVideoFn是在mounted中第一次被执行的
• vue-cli项目是SPA（单页面应用），所以离开直播页面之后，浏览器依然会继续请求m3u8资源，所以需要在离开页面时，销毁hls，这里用到了this.$once(‘hook:beforeDestroy’,function(){})

<template>
 <div id="app">
   <video id="hlsVideo" ref="hlsVideo" controls preload="true"></video>
 </div>
</template>

<script>
 import Hls from 'hls.js';
 export default {
   
   name: 'dHelp',
   data() {
   
     return {
   
       hls: