video-player 使用 blob vue3

### 创建基于 Blob 对象的 Video Player 为了在 Vue3 项目中实现使用 `Blob` 对象作为视频源的播放器，可以采用 `@videojs-player/vue` 组件来构建。此组件专为 Vue3 设计并提供了强大的功能集用于处理多媒体文件[^1]。 #### 安装依赖库 首先，在项目环境中安装所需的 npm 包： ```bash npm install @videojs-player/vue video.js ``` #### 准备视频数据 假设已经有一个 API 或者其他方式获取到视频流，并将其转换成 `Blob` 类型的数据。下面是一个简单的例子展示如何通过 Fetch API 获取远程资源并转化为 `Blob`: ```javascript async function fetchVideoAsBlob(url) { const response = await fetch(url); return await response.blob(); } ``` #### 使用 Component 和 Props 接下来定义一个名为 `<VideoPlayer>` 的单文件组件 (SFC)，它接收两个属性：一个是代表视频 URL 地址字符串形式的 prop (`srcUrl`)；另一个则是经过上述方法得到的实际二进制大对象(`blobObject`)。 ```html <template> <div class="player-container"> <!-- 将 blob 转换成 URL 并传递给 player --> <video-js v-if="source" :sources="[{ src: source, type: 'video/mp4' }]" controls></video-js> </div> </template> <script setup> import { ref, watchEffect } from 'vue'; // 接收父级传入 props const props = defineProps({ srcUrl: String, blobObject: Object }); let source = ref(null); watchEffect(() => { if(props.blobObject){ // 如果有新的 blob 数据，则创建 objectURL source.value = URL.createObjectURL(props.blobObject); } }); </script> ``` 这段代码展示了怎样监听来自外部输入的变化——无论是原始链接还是已下载好的 `Blob` 文件——一旦检测到变化就会立即更新内部状态变量 `source`，从而触发视图重新渲染以反映最新情况。 #### 断点续播的支持 对于希望支持断点续播的情况，特别是在移动端设备上遇到的问题，可以通过保存用户的观看位置并在下次加载时恢复该时间戳的方式解决。需要注意的是，在某些特定环境下（比如 iOS Safari），直接修改 `currentTime` 属性可能不会立刻生效，因此建议结合事件监听机制确保操作成功执行[^3]。 例如可以在 mounted 生命周期钩子内尝试设置初始播放位置： ```javascript mounted() { this.player.on('loadedmetadata', () => { let savedTime = localStorage.getItem('lastPlaybackPosition'); if(savedTime !== null && !isNaN(Number(savedTime))){ setTimeout(() => { this.player.currentTime(parseFloat(savedTime)); }, 0); } }); }, beforeDestroy(){ // 清理工作... localStorage.setItem('lastPlaybackPosition',this.player.currentTime()); } ``` 以上就是关于如何在 Vue3 应用程序里利用 `Blob` 构建自定义视频播放解决方案的大致流程介绍。