video.cjs.js:440 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPO在vue中使用vue-video-player动态获取url加载mp4

video.cjs.js:440 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media. M

首先说说我的问题吧、

一直显示不出来，后面换成这样的代码就行了；

大概就是这样、就是使用一个mp4都报错 一直显示不出来
正确使用方法在下面；看了好多博主的感觉都不行

解决方法：

videojs报错：No compatible source was found for this media.
分析：

1. 在初始化时，没有在src中添加视频资源。

2. 视频资源为空或视频资源无效无法播放。

解决，检查资源是否有效，得以解决。

<div id="playWnd" class="playWnd" v-show="detail.files">
        <videoPlayer
          class="vjs-custom-skin videoPlayer"
          ref="videoplayer"
          :playsinline="true"
          autoplay
          width="800px"
          height="600px"
          :options="playerOptions"
          customEventName="changed"
        >
        </videoPlayer>
      </div>

import { videoPlayer } from "vue-video-player";
import "video.js/dist/video-js.css";
export default {
  components: {
    VueMarkdown,
    videoPlayer,
  },
  name: "Detail",
  data() {
    return {
      srcVideo: "",
      playerOptions: {
        width: "800px",
        height: "600px",
        language: "zh-CN",
        muted: true, // 默认情况下将会消除任何音频
        autoplay: true, // 如果true,浏览器准备好时开始回放。
        controls: true, //不显示暂停、声音、进度条组件
        loop: true, // 视频一结束就重新开始。
        sources: [
          {
            type: "video/mp4",
            src: "", // url地址
          },
        ],
      },

是这样拼接的url

 //视频初始化
    initPlayer() {
      if (this.detail.files == null) {
        document.querySelector("#playWnd").style.display = "none";
      }
      let a = this.detail.files[0].file_path;
      let url = a.split("upload")[1];
      let v = process.env.VUE_APP_BASE_API + "/profile" + url;
      console.log(v);
      //在这里解决的；
      this.$nextTick(()=>{
      		this.playerOptions.sources[0].src = v;
      })
        

视频可以播放了，但是错还在；我就没管了；
听说是跟版本有关系
一定要下载这个版本，太高的6.0会报错 甚至显示不出来视频

npm install vue-video-player@5.0.2 --save
npm install video.js --save

"vue-video-player": "^5.0.2",