vue3+ts没有webpack "video.js": "^8.6.1", "@videojs-player/vue": "^1.0.0", "vue": "^3.2.37"，hls 实现苹果安卓手机的视频播放

### 解决方案 要在 Vue3 + TypeScript 环境下实现跨平台（iOS 和 Android）的 HLS 视频播放，可以通过 `video.js` 及其插件 `@videojs-player/vue` 来完成。以下是具体的实现方法： #### 1. 安装依赖项 安装必要的库来支持视频播放和 HLS 流媒体功能： ```bash npm install video.js @videojs/http-streaming vue-video-player --save ``` 由于需要兼容 iOS 和 Android 设备上的 HLS 播放，还需要额外引入 `hls.js` 库作为后备解决方案[^1]: ```bash npm install hls.js --save ``` #### 2. 配置 Type Declaration 文件 为了使 TypeScript 能够正确解析 `video.js` 的模块定义，在项目的根目录创建或修改现有的 `.d.ts` 文件。例如，新建一个名为 `shims-video.d.ts` 的文件并添加以下内容： ```typescript // shims-video.d.ts declare module 'video.js'; declare module '@videojs-http-streaming'; ``` 如果遇到无法识别模块的情况，可以尝试单独为 `video.js` 创建声明文件，正如引用中提到的方法[^2]。 #### 3. 初始化 Video Player 组件 在 Vue3 中集成 `video.js` 并设置 HLS 支持。首先编写一个自定义组件用于封装视频播放器逻辑： ```vue <template> <div ref="player"></div> </template> <script lang="ts"> import { onMounted, onBeforeUnmount, ref } from 'vue'; import videojs from 'video.js'; export default { name: 'VideoPlayer', props: { options: { type: Object, required: true, }, }, setup(props) { const player = ref(null); onMounted(() => { if (props.options && props.options.sources.length > 0) { player.value = videojs(player.value as Element, props.options, () => { console.log('Player is ready.'); }); } }); onBeforeUnmount(() => { if (player.value instanceof videojs.Player) { player.value.dispose(); } }); return { player, }; }, }; </script> <style scoped> /* 自定义样式 */ .video-js { width: 100%; height: auto; } </style> ``` #### 4. 设置 HLS 支持 为了让 `video.js` 支持 HLS 协议流媒体传输，需加载 `@videojs/http-streaming` 插件，并将其注入到初始化选项中： ```javascript const options = { autoplay: false, controls: true, sources: [ { src: 'https://example.com/path/to/hls/stream.m3u8', // 替换为目标 HLS 地址 type: 'application/x-mpegURL', }, ], techOrder: ['html5'], }; // 将 HTTP Streaming 技术注册至 video.js if ((window as any).Hls) { const Hls = (window as any).Hls; let hls = new Hls(); hls.loadSource(options.sources[0].src); hls.attachMedia(videoElement); // 获取 HTML MediaElement 对象并与之绑定 } ``` 此部分代码确保即使目标设备不原生支持 HLS（如某些版本的 Safari 或 Android WebView），也能借助第三方库正常工作。 #### 5. 使用组件 最后，在父级组件中调用上述 `<VideoPlayer>` 子组件即可： ```vue <template> <VideoPlayer :options="videoOptions" /> </template> <script lang="ts"> import { defineComponent } from 'vue'; import VideoPlayer from './components/VideoPlayer.vue'; export default defineComponent({ components: { VideoPlayer }, data() { return { videoOptions: { autoplay: false, controls: true, sources: [ { src: 'https://example.com/path/to/hls/stream.m3u8', type: 'application/x-mpegURL', }, ], techOrder: ['html5'], }, }; }, }); </script> ``` --- ###