vue3播放m3u8格式视频

### 实现 Vue 3 中播放 M3U8 格式视频 为了在 Vue 3 项目中成功播放 M3U8 格式的视频，推荐采用 `video.js` 和其 HLS 插件组合的方式。以下是具体的操作流程： #### 安装必要的依赖包 通过 npm 或 yarn 来安装所需的软件包，包括 Video.js 及其 CSS 文件以及支持 HTTP Live Streaming (HLS) 的插件。 ```bash npm install video.js videojs-contrib-hls --save ``` 或者如果使用 Yarn: ```bash yarn add video.js videojs-contrib-hls ``` #### 创建并配置 Video 组件 创建一个新的 Vue 单文件组件用于封装 Video.js 播放器逻辑，在此示例中命名为 `VideoPlayer.vue`。 ```html <template> <div ref="player"></div> </template> <script setup lang="ts"> import { onMounted, onBeforeUnmount } from 'vue'; import videojs from 'video.js'; import 'video.js/dist/video-js.css'; // 导入样式表 require('videojs-contrib-hls'); let player; onMounted(() => { const el = document.createElement('video'); Object.assign(el, { id: 'my-video', className: 'video-js vjs-default-skin', controls: true, preload: 'auto' }); el.setAttribute('data-setup', '{}'); el.innerHTML = `<source src="${props.src}" type='application/x-mpegURL' />`; $refs.player.appendChild(el); player = videojs('#my-video'); }); const props = defineProps({ src: String }) onBeforeUnmount(() => { if (player !== undefined && typeof(player.dispose) === "function") { player.dispose(); } }); </script> ``` 这段代码定义了一个简单的 Vue 组件，它接收一个属性 `src` 表示要加载的 M3U8 流地址，并利用生命周期钩子函数初始化和销毁 Video.js 播放实例[^4]。 #### 使用自定义组件 最后一步是在应用程序的主要布局或其他任何地方导入并注册这个新创建的组件，以便能够实际调用该功能。 ```javascript // main.ts or app entry file import App from './App.vue'; import VideoPlayer from '@/components/VideoPlayer.vue'; createApp(App).component('VideoPlayer', VideoPlayer).mount('#app'); ``` 现在可以在模板里像下面这样简单地使用 `<VideoPlayer>` 标签来显示视频了： ```html <!-- SomeComponent.vue --> <template> <!-- ... other elements... --> <VideoPlayer :src="'http://example.com/path/to/stream.m3u8'" /> <!-- ... more content ... --> </template> ``` 以上就是在 Vue 3 应用程序内集成 M3U8 视频流的方法概述。