孙琪峥

比花言巧语更难的是学会闭嘴

鲁ICP备18012478号-1

网站中video方式引入视频资源，播放时提示The media could not be loaded, either because the server or network failed or because the format is not supported.的一种原因

文章最后有2020年最新更新的解决排查方案。

在网站中用HTML5自带的video标签或者video.js的等插件的HTML5模式引入视频后，有少数用户反应观看所有视频时均无法播放，显示如下错误：

 The media could not be loaded, either because the server or network failed or because the format is not supported.

 

反复排查，视频资源没问题，调用方式也没问题。而且出问题的用户所占比例非常小，所在地区、宽带线路也无规律，而且均反映土豆、优酷等站的视频能正常播放。
远程方式查看用户浏览器控制台，网络选项中提示视频资源404，由于视频托管在阿里云oss服务器中，提交工单，阿里工程师也没说出所以然，真是奇了怪了，无语。
反正能想到的都排查了，问题依旧。

一次偶然的机会，一位用户反应说是他们公司的网络管理员禁掉了视频相关协议，导致了这个错误。恍然大悟，之前一直没注意一个细节，就是几乎所有用户都反应说在家正常（家庭线路和自己的路由器一般不会有协议限制），在公司就不能播放，用户说其他网站视频播放正常，当时只考虑用户网络线路的问题了，哪能想到是坑货网管禁视频协议没禁彻底！！！！
PS：如果发生上述情况，从网站开发者角度来讲，基本无解，除非将视频换成flash播放形式，可能会好一些。

总结：

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

1、核实video的url地址是否有误

2、核实用户上网地区（有部分地区可能有限制，比如新疆、西藏）

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

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

5、有部分朋友出现在安卓手机上可以正常播放，但苹果手机iOS系统上无法播放的情况，经排查，是视频的问题，换一个视频或将视频重新转码就可以了。（感谢 wolf9236 朋友的反馈。）

相关阅读

  • WordPress4.3版本Gravatar头像被墙的解决方案三种

  • JavaScript中数学对象Math抽取随机数的公式详解

  • 最新版火狐JavaScript事件对象中的offsetX和offsetY的一个小发现

  • IE浏览器6 7 8 9的css hack详解

  • 给网站添加标题栏ico小图标的方法

  • 禁止移动端网页页面被拖拽下拉的方法

  • 分享一个基于css3的炫酷圆形导航效果

  • 修改网页中被选中文字样式（如背景颜色）的方法

评论

  • 奥德赛1

    为什么部分网站，前几次登陆进去视频能看，后面再看就非常卡，卡的几乎看不了，而且有几次会显示the media could not be loaded either这样的问题？

    • admin

      国外的视频由于国内防火墙的问题，时断时续很正常。挂个代//理应该会好一些。

    • 凡凡

      m3u8直播流在WiFi情况下我写的监听事件可以监听，用流量的话监听事件就不执行了，这个怎么回事，麻烦大佬帮忙解决一下，非常感谢

  • 大大

    排查了 电脑连接手机也不能播放 但是把视频流放在flv播放器可以播放 但是在浏览器上就是播放不了

    • admin

      对了，还要记得排查一下你代码写的有没有问题

    • 大大

      从google换到360还是不能播放 目前只遇到一个视频不能播放 其他的都没问题 如果代码有问题的话其他的视频应该也不能播放吧

    • admin

      检查视频url地址是否正确，然后检查一下视频文件编码是不是问题。一般网络播放的都是h.264编码的mp4文件，可以尝试用格式工厂转换一下视频文件再试。

  • 想想挺好啊

    怎么判断这种情况呢?我出现这种情况是因为路径404,然后需要把播放按钮隐藏,楼主能告诉我一下嘛?

    • admin

      百度搜一下文档，有参数可以控制播放按钮的显示隐藏

    • 可乐

      你的这个问题解决了嘛？请问是怎么解决的。

    • admin

      手机出现这个问题也是按照这几个步骤排查，或者换个手机浏览器试试。

  • 哦

    你好 我这边是播放m3u8格式的直播流； 在电脑和手机的浏览器打开能正常播放 ， 但是到了微信浏览器就是你这个报错， 请问这个怎么破

  • 1217

    苹果手机，使用流量，会显示the media could not be loaded either；同一手机，使用家里的网，也会显示。用笔记本连家里的网，同样会显示。 同一部手机，连公司的网，也会显示。 但是！用单位的电脑连单位的网，无此问题，可以正常播放。困惑中。

    • 1217

      总之就是，手机无论走流量、家里的网、公司的网，都会出现The media could not be loaded的问题。 用笔记本连家里的网也会出现该问题，但是用公司电脑连公司的网无此问题！

    • admin

      或许是浏览器的问题，家里的电脑和公司电脑用同一个浏览器试试。

  • shaojp

    请问在电脑上只有37abc浏览器可以播放，其他浏览器都无法播放m3u8格式是怎么回事，就这两天的事，以前可以。谢谢

  • 不是我而是风

    我手机流量和公司无线网都不能播放,但把url烤出来单独用video标签又能播放了

  • 佛子

    安卓机子上微信就无法播放，或者出错，苹果机子在微信浏览器播放正常，微信开发者工具安卓环境也不行，报错 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported. n {code: 4, message: "The media could not be loaded, either because the …rk failed or because the format is not supported."} code: 4 message: "The media could not be loaded, either because the server or network failed or because the format is not supported." __proto__: Object 非常无奈

    • LicyWanglinli

      请问问题解决了吗？我现在也是类似的问题，但是在安卓机上正常，换到苹果机就不行了，提示The media could not bt loaded,either because the server or network failed or这个错误

    • wolf9236

      请问解决了吗，我也遇到和你一样的问题。安卓上正常的，ios无法播放。

  • 阿杰自我

    我用手机，电脑打开都不行，换了浏览器看了一会就不行了，就出现这串字母

  • lion

    手机可以，电脑不行，重启路由器还是不行，那要解除相关协议？

  • 叶子

    怀疑是ios对video标签的兼容问题，我这边的问题是最新的苹果手机在wifi下正常，流量数据模式下不能加载。同时PC和安卓手机没有任何问题。

  • BruceWang

    遇到同样问题了，我的情况是vue-cli使用vue-vider-player做了单独视频播放页面，路由传值一开始在主页使用require(“../assets/video/ddd.mp4”)是可以的，后在主页子组件路由传值”../assets/video.ddd.mp4“就报标题错误，路由传值使用的query：{}。目前只能期盼它自己能好，哈哈哈哈

  • seaboy

    我也遇到了这个问题：安卓可以正常播放，ios浏览器一直报无法加载视频错误； 确认问题：视频资源分辨率是 4096*2304； 解决方案：使用pr将视频帧宽度改成750；ios可以正常播放了！

  • tianku

    我遇到ios可以正常播放，安卓部分也行。目前就是华为荣耀V30 pro播放，无法加载媒体，微信浏览器播放的。这个怎么解决

  • RRR

    网络问题无关吧 我电脑前几天突然出现了这个问题 之前一直好好的 手机连wifi上同样的网站就没问题 梯子也是用的同一个 我真的头都大了

发表评论 说点什么