vue播放bolb组件

### Vue 中播放 Blob 对象的实现

#### 使用 HTML5 `<video>` 和 `<audio>` 标签处理 Blob 数据

在 Vue 应用程序中，可以使用原生的 HTML5 `<video>` 或者 `<audio>` 标签来播放来自服务器响应中的二进制大对象（BLOB）。当接收到 BLOB 类型的数据之后，可以通过创建 URL 来指向这个临时文件并将其设置为媒体标签的 `src` 属性。

对于视频流：

<template>
  <div>
    <!-- Video element -->
    <video controls :src="videoSrc"></video>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const videoSrc = ref('');

async function fetchVideo() {
  try {
    const response = await axios.get('/api/video', { responseType: 'blob' });
    videoSrc.value = URL.createObjectURL(response.data);
  } catch (error) {
    console.error('Error fetching the video:', error);
  }
}

fetchVideo();
</script>

同样适用于音频流：

<template>
  <div>
    <!-- Audio element -->
    <audio controls :src="audioSrc"></audio>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const audioSrc = ref('');

async function fetchAudio() {
  try {
    const response = await axios.get('/api/audio', { responseType: 'blob' });
    audioSrc.value = URL.createObjectURL(response.data);
  } catch (error) {
    console.error('Error fetching the audio:', error);
  }
}

fetchAudio();
</script>

上述代码展示了如何异步获取多媒体资源作为 BLOB 并立即用于前端展示[^1]。需要注意的是，在实际应用环境中应当考虑错误处理机制以及可能存在的跨域资源共享(CORS)问题。

为了进一步优化用户体验，还可以引入第三方库如 Plyr.io 提供更丰富的交互界面和支持更多格式的解析能力[^2]。