video.cjs.js:440 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPO在vue中使用vue-video-player动态获取url加载mp4_videojs: error: (code:4 media_err_src_not_supporte-程序员宅基地

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.
分析：

在初始化时，没有在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会报错甚至显示不出来视频

npm install [email protected] --save
npm install video.js --save

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

本文链接：https://blog.csdn.net/qq_45018844/article/details/130365683

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

第一章：什么是软件架构？_allocation structures-程序员宅基地

文章浏览阅读1k次。What Software Architecture Is系统的软件体系结构是指系统所需的一组结构，包括软件元素、它们之间的关系以及两者的属性。结构是由一个关系集合在一起的一组元素。We call runtime structures component-and-connector (C&C) structures.Allocation structures describe the ma..._allocation structures

求链式线性表的倒数第K项_c语言求链式线性表的倒数第k项分数 12 作者 ds课程组单位浙江大学给定一系列-程序员宅基地

文章浏览阅读565次。求链式线性表的倒数第K项给定一系列正整数，请设计一个尽可能高效的算法，查找倒数第K个位置上的数字。输入格式:输入首先给出一个正整数K，随后是若干非负整数，最后以一个负整数表示结尾（该负数不算在序列内，不要处理）。输出格式:输出倒数第K个位置上的数据。如果这个位置不存在，输出错误信息NULL。输入样例:4 1 2 3 4 5 6 7 8 9 0 -1输出样例:7标程单链表版#include<map>#include<list>#include<cm_c语言求链式线性表的倒数第k项分数 12 作者 ds课程组单位浙江大学给定一系列

使用YOLOX进行物体检测_yolox 刀具-程序员宅基地

文章浏览阅读1.4k次。YOLOX 是旷视开源的高性能检测器。旷视的研究者将解耦头、数据增强、无锚点以及标签分类等目标检测领域的优秀进展与 YOLO 进行了巧妙的集成组合，提出了 YOLOX，不仅实现了超越 YOLOv3、YOLOv4 和 YOLOv5 的 AP，而且取得了极具竞争力的推理速度。其中YOLOX-L版本以 68.9 FPS 的速度在 COCO 上实现了 50.0% AP，比 YOLOv5-L 高出 1.8% AP！还提供了支持 ONNX、TensorRT、NCNN 和 Openvino 的部署版本，本文将详细介绍如_yolox 刀具

一文搞懂 UML 类图！！！_uml类图-程序员宅基地

文章浏览阅读2.9k次，点赞27次，收藏45次。统一建模语言UML类图是一种用于描述系统结构的图形化工具。它以类和对象为基础，主要用于表示系统中的类、接口、继承关系、关联关系等元素，以及它们之间的静态结构和关系。在本文中，将深入介绍UML类图的基本元素关系类型以及如何创建一个简单而有效的类图。类图以反映类的结构(属性、操作)以及类之间的关系为主要目的，描述了软件系统的结构，是一种静态建模方法。类图用来描述系统中有意义的概念，包括具体的概念、抽象的概念、实现方面的概念等，是对现实世界中事物的抽象。_uml类图

Python数据分析之使用pandas-datareader获取国家经济信息进行分析-程序员宅基地

文章浏览阅读4.2k次，点赞4次，收藏26次。pandas-datareader背景介绍当熟悉了Pandas的两个主要数据结构：Series和DataFrame之后，我们就可以使用pandas-datareader进行金融财经数据的导入和初步分析了。pandas-datareader是基于Python的专门从一系列的公开在线数据库获取数据的工具库，该接口在urllib3库基础上实现了以客户端身份访问在线数据库的各类金融财经股票数据。相关参考网站官网官方文档GIT源码安装pandas-datareader可以使用标准的pip进_pandas-datareader

关于计算机职业发展方向,计算机专业的职业发展方向有哪些-程序员宅基地

文章浏览阅读860次。原标题：计算机专业的职业发展方向有哪些很多人都知道计算机是最近几年比较热门的专业之一，其中薪资高待遇好是很多年轻人加入该行业的原因，但还有一些人会担心计算机专业的未来，毕竟这股“热潮”在互联网行业大裁员中变成让互联网人感觉压力山大的“寒潮”。究竟计算机的未来如何，小编不敢吹嘘说很好，但我相信计算机行业的未来肯定不会差，而且对计算机人才会越来越重视。我们经常会听到有人说程序员是吃青春饭的，真是这..._机算机职业发展

随便推点

docker overlay网络详解-程序员宅基地

文章浏览阅读1w次，点赞10次，收藏36次。之前我们学习的网络是单台主机的网络通讯方案，这里我们学习的是跨跨主机。我们原生的docker跨主机方案有macvlan和overlay，这里我们重点学习overlay第三方网络插件有flannel，calico，weave网络。docker网络之所以这么活跃，是因为网络部分的代码单独抽离出来成为docker的网络库，即libnetwork。为了标准化网路驱动的开发步骤和支持各种网络驱动，libnetwork中使用了CNM（container network model），CNM定义了构建容器_docker overlay