Vue的video-player的视频无法加载出来，vue视频插件；显示叉号； The media could not be Loaded,

1.安装vue视频插件

解：百度一下，有很多教程，我这里不多说

2.问题：视频资源资源显示“X”号

1.首先你写好的要用视频的那块

<!-- HTML部分 --><video-player class="video-player"ref="videoPlayer":playsinline="true":options="playerOptions"></video-player>

2.脚本语言写的参数，方法

data() {return {playerOptions: {// 播放速度  playbackRates: [0.7, 1.0, 1.5, 2.0],autoplay: true, //如果true,浏览器准备好时开始回放。// muted: false, // 默认情况下将会消除任何音频。loop: false, // 导致视频一结束就重新开始。preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）// language: 'zh-CN',aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。sources: [{type: "video/mp4",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目src: "../../assets/video/非凡 杰出 不同凡响.mp4" //url地址}],poster: "../../assets/images/胶片bg001.png", //你的封面地址// width: document.documentElement.clientWidth, //播放器宽度//允许覆盖Video.js无法播放媒体源时显示的默认信息。 notSupportedMessage: '此视频暂无法播放，请稍后再试', controlBar: {timeDivider: true,durationDisplay: true,remainingTimeDisplay: false,fullscreenToggle: true  //全屏按钮}},

3.结果你去调试，出现
videoLoadError
The media could not be loaded, either because the server or network failed or because the format is not supported

3.解决

如果资源是本地的会出现这种情况
需要把资源写入require（）方法里面

sources: [{type: "video/mp4",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目src: require("../../assets/video/非凡 杰出 不同凡响.mp4") //url地址}],poster: require("../../assets/images/胶片bg001.png"), //你的封面地址

一定要加require（）；

Vue的video-player的视频无法加载出来，vue视频插件；显示叉号； The media could not be Loaded,相关推荐

6-6 快速播放音频和视频预加载
更快的播放开始意味着更多的人观看您的视频或收听您的音频.这是众所周知的事实.在本文中,我将探讨可用于通过根据您的用例主动预加载资源来加速音频和视频播放的技术. 我将描述预加载媒体文件的三种方法,从它们 ...
微信小程序开发视频加载：[渲染层网络层错误] Failed to load media
问题: 加载多个视频时遇到的报错,原因是调试基础库版本太高,虽然不会影响视频播放,可是不解决看着心里又难受. 解决方法: 在video标签里加controls <video src=" ...
OpenCV：01图片视频的加载显示
文章目录 **学习目标:** 图像与视频的加载显示导入OpenCV的包`cv2` 窗口操作计算按键的`ASCII`值读取图片用其他插件来读取(以`matplotlib`为例) 用`OpenCV ...
OpenCV初尝试1——图像视频的加载和显示
1. 图像视频的加载和显示第一次的内容比较基础,因为本人也是初学OpenCV甚至Python的基础都不是怎么好(之前一直在学Java). 当然首先需要准备好OpenCV的环境,这些一般B站讲Open ...
Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
unityios开发--加载视频以及加载完成之后自动跳转 .
在做游戏或者是虚拟漫游一般都会用到在开始的时候加载一段视频,这个视频可能一个介绍整个游戏或者是整个项目的.在加载完了之后自动的跳转到主画面或一个场景,在前在网上百度了一下找到的大部分都是win的好不容 ...
vue+webpack项目打包后背景图片加载不出来问题解决
vue+webpack项目打包后背景图片加载不出来问题解决参考文章: (1)vue+webpack项目打包后背景图片加载不出来问题解决 (2)https://www.cnblogs.com/mica ...
视频怎么加水印上去，视频加水印怎么加？
视频怎么加水印上去,视频加水印怎么加?现在有很多的自媒体创业者,他们会将自己创作的视频作品分享到各种平台,给别人观看的同时给自己带来一定的收益.互联网是一个开放的平台,也存在一个视频搬运工,专门盗取别 ...
Coursera的视频一直加载无法播放问题的完整解决【win10】
Coursera的视频一直加载无法播放问题的完整解决[win10] 问题来源:注册了coursera,准备原汁原味地学练吴恩达老师的机器学习和深度学习教程,自加入课程起会有日程安排,太懒了,拖到人家连 ...
Vue 组件封装之 ScrollView 上拉加载更多
Vue 组件封装之 ScrollView 上拉加载更多一.ScrollView 上拉加载更多二.使用案例三.API 使用指南四.源代码一.ScrollView 上拉加载更多组件说明: 实现 ...

Vue的video-player的视频无法加载出来，vue视频插件；显示叉号； The media could not be Loaded,

1.安装vue视频插件

2.问题：视频资源资源显示“X”号

3.解决

Vue的video-player的视频无法加载出来，vue视频插件；显示叉号； The media could not be Loaded,相关推荐

最新文章

热门文章