vue2使用 Hls.js

在Vue 2中使用Hls.js可以实现在网页中播放HTTP Live Streaming (HLS)视频流。下面是使用Hls.js的基本步骤：

1. 首先，安装Hls.js。你可以通过npm或yarn来安装Hls.js。在项目根目录下运行以下命令：

   npm install hls.js

2. 在Vue组件中引入Hls.js：

   import Hls from 'hls.js';

3. 在Vue组件的生命周期钩子中初始化和销毁Hls实例。你可以在`mounted`钩子中初始化Hls实例，并在`beforeDestroy`钩子中销毁它：

   export default {
     mounted() {
       if (Hls.isSupported()) {
         const video = this.$refs.video; // 假设你在模板中有一个video标签，通过ref属性引用它
         const hls = new Hls();
         hls.loadSource('your HLS video URL'); // 替换为你的HLS视频URL
         hls.attachMedia(video);

         // 监听Hls事件
         hls.on(Hls.Events.MANIFEST_PARSED, () => {
           video.play();
         });

         // 保存Hls实例到组件的data属性中，方便后续销毁
         this.$data.hls = hls;
       }
     },
     beforeDestroy() {
       if (this.$data.hls) {
         this.$data.hls.destroy();
       }
     },
   }

4. 在模板中添加一个video标签，并通过ref属性引用它：

   <template>
     <video ref="video"></video>
   </template>

5. 这样就可以在Vue中使用Hls.js播放HLS视频流了。记得替换代码中的`your HLS video URL`为你实际的HLS视频流URL。

希望以上步骤对你有所帮助！