vue3 监听video标签加载失败

在 Vue3 中监听 `<video>` 标签的加载失败事件，你可以通过 `@error` 或者 `v-on:error` 绑定到视频元素上。这里是一个简单的示例：

<template>
  <div>
    <video ref="myVideo" @error="handleVideoError">
      <source :src="videoSrc" type="your-video-type" />
    </video>
    <p v-if="videoError">视频加载失败</p>
  </div>
</template>

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

const videoSrc = 'your-video-url';
const videoError = ref(null);
const myVideo = ref(null);

function handleVideoError(e) {
  if (e.target.error) {
    videoError.value = e.target.error.message; // 存储错误信息
    console.error('视频加载失败:', e);
  }
}
</script>

在这个例子中，当 `<video>` 的加载失败时，`handleVideoError` 函数会被调用，我们检查 `e.target.error` 是否存在来判断是否真的发生了错误，并将错误消息存储在 `videoError` 变量中。然后可以在模板中使用 `v-if` 检查这个变量来显示相应的错误提示。