Vue2使用video标签 + hls.js实现播放m3u8视频流

在Vue 2中，你可以使用video标签和hls.js来播放M3U8格式的视频流。首先，确保你已经安装了hls.js库。如果没有安装，可以通过npm进行安装：

npm install hls.js --save

然后，你可以在Vue组件中这样使用：

<template>
  <div>
    <video ref="video" controls autoplay></video>
  </div>
</template>
 
<script>
import Hls from 'hls.js';
 
export default {
  name: 'VideoPlayer',
  mounted() {
    const video = this.$refs.video;
 
    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource('你的m3u8视频流地址');
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        video.play();
      });
    } else if (video.canPlayType('application/vnd.apple.mpegURL')) {
      video.src = '你的m3u8视频流地址';
      video.addEventListener('loadedmetadata', () => {
        video.play();
      });
    }
  }
};
</script>

确保将 '你的m3u8视频流地址' 替换为你的实际视频流URL。这段代码在组件加载时检查浏览器是否支持HLS，如果支持，则使用hls.js来处理m3u8格式的视频流，否则使用原生video标签的支持来播放。