vue3使用m3u8循环播放m3u8

### 实现 Vue3 中 m3u8 视频文件的循环播放 为了在 Vue3 项目中实现 m3u8 视频文件的循环播放，可以采用 `vue3-video-play` 或者基于 `Hls.js` 的自定义解决方案。 #### 方法一：使用 `vue3-video-play` 通过安装并配置 `vue3-video-play` 插件来简化开发过程。此方法适用于大多数场景下的视频播放需求[^4]。 1. 安装依赖： ```bash npm install vue3-video-play hls.js --save ``` 2. 在组件内引入并设置属性： ```html <template> <div id="app"> <!-- 设置 loop 属性以启用循环播放 --> <video-play :options="playerOptions"></video-play> </div> </template> <script setup> import { ref } from "vue"; const playerOptions = ref({ playbackRates: [0.7, 1.0, 1.5, 2.0], // 可选播放速度 autoplay: false, muted: false, loop: true, // 启用循环播放 language: 'zh-CN', sources: [{ type: "application/x-mpegURL", src: "YOUR_M3U8_URL_HERE" }], }); </script> ``` 这种方法简单易行，适合快速集成到现有项目中去。 #### 方法二：手动集成 HLS 和 Video.js 对于更复杂的定制化需求，则可以选择直接利用 `Hls.js` 结合 `Video.js` 来构建播放器[^3]。 1. 添加必要的库： ```bash npm install video.js hls.js @types/hls.js --save ``` 2. 创建一个新组件用于处理 M3U8 流媒体播放： ```javascript // MyVideoPlayer.vue <template> <div class="my-video-player"> <video ref="videoPlayer" class="video-js vjs-default-skin"></video> </div> </template> <script lang="ts"> import { defineComponent, onMounted, ref, watchEffect } from 'vue'; import videojs from 'video.js'; import 'video.js/dist/video-js.css'; export default defineComponent({ props: { url: String, }, setup(props) { const videoPlayer = ref<HTMLVideoElement | null>(null); let player; onMounted(() => { if (!window.Hls) window.Hls = require('hls.js'); if (props.url && videoPlayer.value) { player = videojs(videoPlayer.value); if (window.Hls.isSupported()) { var hls = new window.Hls(); hls.loadSource(props.url); hls.attachMedia(player.el()); // 开启循环播放功能 player.on('ended', function() { this.currentTime(0); this.play(); }); } } return () => { if (player !== undefined) player.dispose(); }; }); return { videoPlayer }; }, }); </script> ``` 这种方式提供了更大的灵活性，允许开发者根据具体业务逻辑调整播放行为。