video-player判断视频地址是否有效 vue

你可以使用 JavaScript 中的 Video 对象来判断视频地址是否有效。以下是一段示例代码，可以在 Vue 组件中使用：

<template>
  <div>
    <video ref="video" :src="videoUrl" @error="handleVideoError"></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: "https://example.com/video.mp4",
      videoError: false
    };
  },
  methods: {
    handleVideoError() {
      this.videoError = true;
    }
  },
  mounted() {
    this.$refs.video.addEventListener("loadedmetadata", () => {
      if (this.$refs.video.duration === NaN) {
        this.videoError = true;
      }
    });
  }
};
</script>

这段代码中，我们在模板中定义了一个 Video 标签，使用 videoUrl 属性来绑定视频地址。当视频加载出错时，会触发 @error 事件，我们可以在 handleVideoError 方法中设置一个 videoError 的状态来表示视频地址无效。

在 mounted 钩子函数中，我们监听了 loadedmetadata 事件，该事件表示视频元数据已经被加载，我们可以通过检查 duration 属性来判断视频是否有效，如果 duration 为 NaN，则表示视频无效。