vue-video-player 报错The media could not be loaded, either because the server or network failed or bec

main.js 引入

import VideoPlayer from 'vue-video-player' import 'video.js/dist/video-js.css' Vue.use(VideoPlayer)

<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" ></video-player>

playerOptions: { playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度 autoplay: false, // 如果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: [ { src: 'http://vjs.zencdn.net/v/oceans.mp4', type: 'video/mp4' } ], poster: require('@/assets/home1/sp1.png'), // 你的封面地址 width: document.documentElement.clientWidth,

notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。

controlBar: { timeDivider: true, durationDisplay: true, remainingTimeDisplay: false, fullscreenToggle: true // 全屏按钮 } }

在排查这个问题的时候可以按照以下步骤依次排除原因

1、核实video的url地址是否有误(找了好多地址都是这个错,地址共同点是都是.cn结尾的网址,而cn结尾的网站很难注册,后来换了.net网址,正常播放)

2、核实用户上网地区(有部分地区可能有限制,比如新疆、西藏)

3、核实用户的上网环境,是家庭网络还是公司网络,如果是家庭网络,让用户重启路由器试试。如果是公司网络,让用户问下公司网管是否禁掉相关协议。

4、如无法确定所连网络是否禁止相关协议,可以建议用户用电脑连接手机热点后再尝试播放,如果连接手机热点后能播放,那一定是相关视频协议被禁掉了。

5、有部分朋友出现在安卓手机上可以正常播放,但苹果手机iOS系统上无法播放的情况,经排查,是视频的问题,换一个视频或将视频重新转码就可以了。(总结来自http://www.sunqizheng.com/blog/956.html)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
安装vue-video-player可能有多种原因。其中一种可能是在安装vue-video-player时出现了误,导致安装不完整或者出现了依赖问题。为了解决这个问题,你可以尝试以下几个步骤: 1. 确保你使用了正确的安装命令。你可以使用以下命令来安装vue-video-player: ``` npm install vue-video-player --save ``` 2. 如果你已经正确安装了vue-video-player,你可以尝试重新安装一次。你可以使用以下命令来重新安装: ``` npm uninstall vue-video-player npm install vue-video-player --save ``` 3. 检查你的项目的依赖是否正确配置。你可以打开项目的`package.json`文件,查看是否已经正确添加了vue-video-player的依赖项。如果没有,你可以手动添加以下代码: ``` "dependencies": { "vue-video-player": "^8.0.0" } ``` 4. 如果你仍然遇到问题,可以尝试清除npm缓存并重新安装vue-video-player。你可以使用以下命令来清除缓存: ``` npm cache clean --force ``` 然后再次运行安装命令: ``` npm install vue-video-player --save ``` 以上是一些可能的解决方案,希望能帮助你解决问题。如果问题仍然存在,请检查你的网络连接是否正常,或者尝试在其他设备上进行安装。如果问题仍然无法解决,你可以查阅vue-video-player的官方文档或者在开发者社区中寻求帮助。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue-video-player 在使用时视频加载不出来,The media could not be loaded, either because the ...](https://blog.csdn.net/weixin_44398350/article/details/127884283)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue-video-player实现实时视频播放方式(监控设备-rtmp流)](https://download.csdn.net/download/weixin_38682790/13964391)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [关于打包、运行 vue-video-player 问题](https://blog.csdn.net/qq_48647684/article/details/130845495)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值