vue3+TS实现播放视频功能

<think>我们正在处理一个关于在Vue3项目中使用TypeScript实现视频播放功能的问题。根据提供的引用，有两种方式可以实现：一种是直接使用video.js，另一种是使用@videojs-player/vue组件。 引用[1]展示了在Vue3的setup语法糖中使用video.js的方法： 1. 安装video.js和相应的类型声明（如果需要的话，因为使用TypeScript）。 2. 在组件中引入video.js及其样式。 3. 在模板中放置video元素，并设置ref和类名（如video-js）。 4. 在onMounted生命周期钩子中初始化video.js播放器。 引用[2]则介绍了使用@videojs-player/vue这个封装好的Vue组件： 1. 安装video.js和@videojs-player/vue。 2. 在main.ts中全局引入VueVideoPlayer和video.js的样式。 3. 在组件中直接使用<video-player>标签。 由于用户要求使用TypeScript，我们需要注意类型声明。对于第一种方式，我们需要安装video.js的类型声明包（@types/video.js）。但是，请注意，video.js本身可能已经包含了类型声明，所以我们可以先尝试安装video.js，如果类型不存在再安装@types/video.js。 但是，根据引用[2]的方式，使用@videojs-player/vue，它可能已经自带了类型声明，因为它是为Vue3设计的。 考虑到用户的需求，我们将提供两种实现方式，并说明步骤。 方式一：直接使用video.js 步骤： 1. 安装依赖：video.js 和 它的类型声明（如果必要） 2. 在Vue组件中，使用setup语法糖（<script setup lang="ts">）编写代码 3. 模板中放置video元素，并设置ref 4. 在onMounted中初始化播放器，并传入配置项 方式二：使用@videojs-player/vue组件 步骤： 1. 安装依赖：@videojs-player/vue 和 video.js 2. 在main.ts中全局注册（或者也可以在组件中局部注册） 3. 在组件中直接使用<video-player>组件，并传入配置 由于用户没有特别指定使用哪种方式，我们可以都介绍一下，让用户选择。 但是，注意引用[2]中提到了全局引入，而引用[1]是局部引入。我们也可以根据用户的偏好来提供。 下面我们分别给出两种方式的代码示例。 方式一：直接使用video.js（局部引入） 首先，安装video.js： ```bash npm install video.js ``` 如果video.js没有自带类型，那么需要安装类型声明（一般情况下，video.js从7.6.6版本开始自带类型，所以可能不需要）： ```bash npm install @types/video.js --save-dev ``` 然后，在组件中： 注意：在模板中，我们使用ref来获取DOM元素，但要注意，在setup中我们使用ref来绑定。 方式二：使用@videojs-player/vue 首先，安装： ```bash npm install video.js @videojs-player/vue ``` 然后，在main.ts中全局注册： 或者，也可以在组件中局部注册。 由于用户要求使用TypeScript，我们将使用TypeScript语法。 下面分别给出两种方式的详细代码。 方式一示例代码（直接使用video.js）：</think>在 Vue3 项目中结合 TypeScript 实现视频播放功能，推荐使用成熟的视频播放库如 `video.js` 或专用 Vue 组件 `@videojs-player/vue`。以下是两种实现方案： ### 方案一：使用原生 video.js (推荐) ```bash npm install video.js @types/video.js ``` ```vue <template> <div> <video ref="videoPlayer" class="video-js vjs-default-skin" controls preload="auto" width="600"> <source :src="videoUrl" type="video/mp4" /> </video> </div> </template> <script setup lang="ts"> import { onMounted, ref, onBeforeUnmount } from 'vue'; import videojs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js'; import 'video.js/dist/video-js.css'; const videoUrl = ref('https://example.com/sample.mp4'); // 替换为实际视频URL const videoPlayer = ref<HTMLVideoElement | null>(null); let player: VideoJsPlayer | null = null; const options: VideoJsPlayerOptions = { controls: true, autoplay: false, playbackRates: [0.5, 1, 1.5, 2], responsive: true, fluid: true, sources: [{ src: videoUrl.value, type: 'video/mp4' }] }; onMounted(() => { if (videoPlayer.value) { player = videojs(videoPlayer.value, options, () => { console.log('播放器已初始化'); }); } }); onBeforeUnmount(() => { player?.dispose(); // 销毁播放器防止内存泄漏 }); </script> ``` ### 方案二：使用 Vue 专用组件 `@videojs-player/vue` ```bash npm install video.js @videojs-player/vue ``` ```vue <template> <video-player src="https://example.com/sample.mp4" :options="playerOptions" @ready="onPlayerReady" /> </template> <script setup lang="ts"> import { ref } from 'vue'; import type { VideoJsPlayer } from 'video.js'; const playerOptions = ref({ autoplay: false, controls: true, responsive: true, playbackRates: [0.5, 1, 1.5, 2], sources: [{ src: 'https://example.com/sample.mp4', type: 'video/mp4' }] }); const onPlayerReady = (player: VideoJsPlayer) => { console.log('播放器就绪', player); }; </script> ``` ### 关键配置说明 1. **视频源配置**： - 支持多种格式：`MP4`/`WebM`/`HLS`/`DASH` - 多源备用方案： ```ts sources: [ { src: 'hd-video.mp4', type: 'video/mp4', label: 'HD' }, { src: 'sd-video.mp4', type: 'video/mp4', label: 'SD' } ] ``` 2. **常用功能**： ```ts const options = { controls: true, // 显示控制条 autoplay: 'muted', // 静音自动播放（符合浏览器策略） loop: true, // 循环播放 muted: true, // 默认静音 preload: 'auto', // 预加载策略 poster: 'thumbnail.jpg' // 视频封面 } ``` 3. **事件监听**： ```ts player.on('play', () => console.log('开始播放')); player.on('ended', () => console.log('播放结束')); player.on('error', (err) => console.error('播放错误', err)); ``` ### 注意事项 1. **跨域问题**：若视频源在外部域，需确保服务器配置`CORS`头 2. **类型支持**：安装 `@types/video.js` 获得完整 TS 类型提示 3. **响应式布局**：使用 `fluid: true` 使播放器自适应容器 4. **移动端适配**：添加 `<meta name="viewport">` 标签 > 提示：对于直播流(HLS/DASH)，需额外安装 `videojs-contrib-hls` 或 `videojs-http-streaming` 插件[^1]