Video.js 报错 The media could not be loaded, because the format is not supported.

Question

最近在做项目过程中，使用 Video.js 实现视频播放效果，根据 Video.js Vue版本官方文档提供的例子简单调试了一下，在Chrome 和 Firefox 上都出现错误
VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported. 检查了一下发现URL 的路径是没有问题的，想问一下如何解决这个问题？
问题图片：

// Video.vue部分代码
<template>
  <video-player :options="videoOptions"/>
</template>

<script>
import VideoPlayer from "../components/VideoPlayer.vue"
export default {
  components: {
    VideoPlayer,
  },
  data() {
    return {
      videoOptions: {
        autoplay: false,
    controls: true,
        width: "700px",
        height: "600px",
        preload: "auto",
        controlBar:{
          playToggle: true,
        },
        // html5: {
        //   nativeAudioTracks: false,
        //   nativeVideoTracks: false
        // },
    sources: [
      {
            type: "video/mp4",
        src: require("../assets/video/test2.mp4"),
      }
    ]
    }
  }
  },
</script>

// VideoPlayer 部分代码
<template>
  <div class="player">
    <video ref="videoPlayer" class="video-js"></video>
  </div>
</template>

<script>
import videojs from 'video.js';
export default {
   props: {
    options: {
      type: Object,
      default() {
        return {};
      }
    }
    },
  data() {
    return {
      player: null
    }
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
      console.log('onPlayerReady', this);
    })
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  }
}
</script>