vue3+hls.js播放m3u8视频

场景：大屏循环播放视频有时会卡住
1，安装hls.js

npm install hls.js

2，组件代码

<template>
  <div>
    <video ref="videoPlayer" autoplay loop muted style="height: 100%; width: 100%;"></video>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import Hls from 'hls.js';

const videoPlayer = ref(null);
const hls = ref(null);

onMounted(() => {
  // 本地 m3u8 文件的路径（需放置于 public 或通过文件选择获取）
  const m3u8Url = '/videos/example.m3u8'; // 假设文件在 public/videos 目录下

  // 兼容性检查
  if (Hls.isSupported() && videoPlayer.value) {
    hls = new Hls();
    hls.loadSource(m3u8Url);
    hls.attachMedia(videoPlayer.value);

    // 可选：监听错误事件
    hls.on(Hls.Events.ERROR, (event, data) => {
      console.error('HLS 错误:', data);
    });
  } else if (videoPlayer.value.canPlayType('application/vnd.apple.mpegurl')) {
    // Safari 等原生支持 HLS 的浏览器
    videoPlayer.value.src = m3u8Url;
  }
});

// 清理资源
onUnmounted(() => {
  if (hls) {
    hls.destroy();
  }
});
</script>