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

这篇具有很好参考价值的文章主要介绍了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

首先说说我的问题吧、
media_err_src_not_supported,javascript,vue.js,ecmascript
一直显示不出来，后面换成这样的代码就行了；

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

解决方法：

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

在初始化时，没有在src中添加视频资源。
视频资源为空或视频资源无效无法播放。

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

<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会报错甚至显示不出来视频文章来源地址https://www.toymoban.com/news/detail-642380.html

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

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

到了这里，关于video.cjs.js:440 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPO在vue中使用vue-video-player动态获取url加载mp4的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！