网页文件加载失败如何重试

文由 ChatMoney团队出品

在我们开发网站应用时，我们可能会遇到脚本加载失败的情况，导致脚本加载失败的原因有很多，比如用户的网络问题、终端设备问题、用户浏览器版本等诸多因素。

解决方案

在 JavaScript 中，我们可以创建一个监听来监听脚本加载失败的情况，然后针对加载失败的脚本进行重新加载。

重新加载的方案，一般是通过更换域名来解决。我们给每个脚本添加一个映射关系表，用来在加载失败时匹配新的域名进行重试。

具体的解决方案，下面我一步一步讲解，另外希望大家可以仔细阅读注释中的内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>脚本加载失败如何重试</title>
    <script>
      window.addEventListener(
        "error", // 监听全局错误
        function (e) {
          console.log(e);
        },
        true // 由于脚本加载失败不会冒泡，所以我们要在捕获阶段进行监听
      );
    </script>
  </head>
  <body>
    <script src="https://www.zowlsat.com/api/1.js"></script>
    <script src="https://www.qqqqqqq.com/api/2.js"></script>
    <script src="https://www.zowlsat.com/api/3.js"></script>
  </body>
</html>

此时我们可以在浏览器控制台看到以下效果

但是这个监听方法会监听到很多其他的错误，我们只需要监听脚本加载失败的错误，所以我们要通过这个监听事件的参数 e 来判断了

根据上图我们可以发现，普通错误的类型是 ErrorEvent，而脚本加载失败的类型是 Event，并且他的 target 会指向 script 标签，所以我们根据这个区别过滤掉其他的错误，这样剩下的情况才是我们需要处理的。

window.addEventListener(
  "error",
  function (e) {
    if (e.target.tagName !== "SCRIPT" || e instanceof ErrorEvent) return;
    console.log(e);
  },
  true
);

接下来就是如何来实现重新加载，我们先给需要重新加载的域名建立一个映射关系，用于替换映射关系表中的域名。然后就是挨个匹配，当还是加载失败时继续匹配下一个，直到成功为止。

const domainList = ["www.aaaaa.com", "www.bbbbb.com", "www.zowlsat.com"];
const retry = {};
window.addEventListener(
  "error",
  function (e) {
    if (e.target.tagName !== "SCRIPT" || e instanceof ErrorEvent) return;
    // 创建一个URL对象
    const url = new URL(e.target.src);
    // 获取文件路径
    const key = url.pathname;
    // 假如映射表中没有这个文件路径，那么就初始化一个映射键
    if (!(key in retry)) {
      retry[key] = 0;
    }
    // 假如匹配完整个映射表都没重新加载成功，则放弃
    const index = retry[key];
    if (index >= domainList.length) {
      return;
    }
    // 获取新的完整路径
    const domain = domainList[index];
    // 替换域名
    url.host = domain;
    // 创建新的script标签
    const script = document.createElement("script");
    script.src = url.toString();
    // 将新的script标签追加到加载失败的script标签之前
    document.body.insertBefore(script, e.target);
    retry[key]++;
  },
  true // 由于脚本加载失败不会冒泡，所以我们要在捕获阶段进行监听
);

到此为止，我们功能已经基本实现，效果如下图

但是有一个很关键的问题，就是假如我 2.js 这个文件中的内容，在 3.js 中要使用，那这样的话，2.js 就必须加载到 3.js 之前，否则就会报错。此时，我们就需要在 2.js 加载失败时，阻塞浏览器的解析，知道重新加载完成或者放弃重新加载时，再继续渲染之后的内容。

那这样的话我们该怎么做呢？

其实很简单，在我们入门 js 时就学到过一个知识点，就是使用document.write

document.write这个方法在解析期间使用的话，会阻塞浏览器的解析，而我们现在就是需要阻塞浏览器解析，那此时我们只需要将创建 script 标签的方法更换为document.write方法即可。

修改之后的代码如下：

const domainList = ["www.aaaaa.com", "www.bbbbb.com", "www.zowlsat.com"];
const retry = {};
window.addEventListener(
  "error",
  function (e) {
    if (e.target.tagName !== "SCRIPT" || e instanceof ErrorEvent) return;
    const url = new URL(e.target.src);
    const key = url.pathname;
    if (!(key in retry)) {
      retry[key] = 0;
    }
    const index = retry[key];
    if (index >= domainList.length) {
      return;
    }
    const domain = domainList[index];
    url.host = domain;
    // 此处加上转译是因为防止编译器识别script标签为结束标签报错
    document.write(`\<script src="${url.toString()}">\<\/script>`);
    //   const script = document.createElement("script");
    //   script.src = url.toString();
    //   document.body.insertBefore(script, e.target);
    retry[key]++;
  },
  true
);

现在我们再打开控制台查看，现在js文件按它原来的顺序执行了，这样既不会改变原有的代码逻辑，又可以在可控范围内进行重新加载。

效果如下图：

以上是简单实现了一个js文件重新加载错误的方案，其实这个方案也可以运用到其他很多类型的文件，不限于js文件。

然后我们还需要更加细化这个方法的话，我们可能还需要考虑到这个script标签是否带有async、defer等属性，还有诸多需要考虑的点，但是沿着这个方向解决的话，大体是没有问题的。

关于我们

本文由ChatMoney团队出品，ChatMoney专注于AI应用落地与变现，我们提供全套、持续更新的AI源码系统与可执行的变现方案，致力于帮助更多人利用AI来变现，欢迎进入ChatMoney获取更多AI变现方案！

们从播放开始，因为观看直播最重要的一个环节就是打开播放器，很多问题的直接反馈也是来自观众端。

导致播放失败的原因，有很多种，不一定是播放器本身的问题，不过通过播放器，我们很容易反过来排查服务端或者推流端的问题。下面我们会从播放失败的表现、播放问题排查工具、常见问题分析等多个方面展开讨论。

1. 播放失败的表现

播放失败的表现总结下来包括但不限于以下这些：

- 界面上一直显示 “加载中”，或者提示播放失败的错误

- 播放画面卡死不动，但 UI 按钮可以点击

- 有声音没有画面，有画面没有声音

这里并不讨论如播放卡顿、音画不同步、马赛克、延时、花屏等问题，这些话题，我们将会在后续的文章中探讨，本文重点关注的是：为啥无法顺利 “打开” 直播流？

2. 播放问题的排查工具

一旦我们遇到视频播放不了，第一件事，就是要找几个别的播放器也播放看看，做一下对比测试，或者对码流做一些基础分析，以便更好地定位问题的源头，各个平台比较常见的播放/分析工具有如下几个：

2.1 命令行工具

ffplay，ffprobe，mediainfo，hls-analyzer 等

2.2 网页端工具

http://www.cutv.com/demo/live_test.swf

SRS

2.3 App 应用

vlc，vplayer，mxplayer 等

2.4 Windows 工具

mp4info，FlvParse，FLVMeta，Elecard StreamEye Studio 等

音视频开发学习地址：C/C++Linux服务器开发/后台架构师【零声教育】-学习视频教程-腾讯课堂

【文章福利】：小编整理了一些个人觉得比较好的学习书籍、视频资料共享在群文件里面，有需要的可以自行添加哦！~点击832218493加入（需要自取）

3. 常见播放失败问题排查

3.1 基础概念

从给播放器传入播放地址，到播放画面显示出来，一般有如下几个步骤：

- DNS 解析，将播放地址中的域名解析为对应的服务器 ip 地址

- 连接服务器，完成 http 请求或者 rtmp 握手过程

- 接收服务器发送的数据，解协议解封装，拿到音视频数据解码播放

任何一个环节出了问题，都有可能导致播放失败，不同的协议，由于协议层原因，播放报错往往不太一样，我们下面的讨论，主要以 RTMP/HTTP 这两种协议为主，假设正常的播放测试地址如下：

香港卫视的 RTMP 直播流：rtmp://live.hkstv.hk.lxdns.com/live/hks

W3C School 的测试 mp4 流：http://www.w3school.com.cn/i/movie.mp4

3.2 域名解析失败

如果播放地址的域名无法解析，会导致播放失败，一般断网了或者域名无效，则播放的时候，会有类似如下报错：

$ ffplay rtmp://live.hkstv.hk.lxdns.com1/live/hks
Failed to resolve hostname live.hkstv.hk.lxdns.com1: nodename nor servname provided, or not knownFailed to resolve hostname live.hkstv.hk.lxdns.com1: No address associated with hostname

当然，如果有网络，但是域名解析失败，一般 ISP 运营商可能会返回一些类似 404 页面，或者跳转到其他的默认网页，因此，对于 HLS，HTTP-FLV，HTTP-mp4 等码流，会因为读到一些 “脏数据” 从而返回一些其他的错误，例如：

$ ffplay http://www.w3school2.com.cn1/i/movie.m3u8
http://www.w3school2.com.cn1/i/movie.m3u8: Operation timed out
$ ffplay http://www.w3school2.com.cn1/i/movie.mp4
http://www.w3school2.com.cn1/i/movie.mp4: Invalid data found when processing input

遇到这类错误，一般可以通过 ping 一下域名试试，看看是否可以 ping 通，如果 ping 不通，则可能要检查下域名解析的配置了。

3.3 服务器连接失败

如果域名正确，并且有网络连接的状态，多半是可以正常解析出服务器 ip 地址的，但是依然有连接失败的可能，比如，这台服务器相应的服务挂掉了，或者并没有在相应的端口提供服务，从而导致播放器连接失败，类似问题的报错如下：

$ ffplay rtmp://www.jhuster.com/live/hks
Cannot open connection tcp://www.jhuster.com:1935rtmp://www.jhuster.com/live/hks: Operation timed out

因为 www.jhuster.com 对应的服务器并没有提供 rtmp 拉流服务，因此通过 1935 连接该服务器会失败。

$ ffplay https://www.w3school.com.cn/i/movie.mp4
Connection to tcp://www.w3school.com.cn:443 failed: Connection refused

因为 w3school 在线教程并不支持 https 访问，因此通过 443 接口请求 https 连接失败

当然，也有可能是这台服务器虽然提供了 rtmp 拉流服务但是宕机了，因此，我们需要通过 dig 命令确定最终访问的是哪一台服务器，并排查下该服务器为什么无法连接，当然，最好是修改下 ffpmeg 源码，把解析出来的服务器 ip 地址打印出来，这样就可以直接看到所连接的服务器地址了。

3.4 请求的资源不存在

对于 http 协议的直播地址，请求的播放资源不存在，返回的错误还是比较快的，比如：

$ ffplay http://jhuster.com/live/hks.mp4
Page not found · GitHub Pages Server returned 404 Not Found

$ ffplay http://www.w3school2.com.cn/i/movie2.mp4
http://www.w3school2.com.cn/i/movie2.mp4: Invalid data found when processing input

注：由于读到 ISP 运营商返回的跳转页面的 “脏数据”，因此也有可能返回上面这种错误

而 RTMP 直播协议，跟 HTTP 协议的播放，有着一个很大的不同，就是播放器请求的数据，并不一定 “存放” 在服务器，因此，服务器无法简单通过 URI 定位不到则返回 404，这些数据是在 RTMP 握手之后，由生产端逐步产生并由服务器转发到客户端，因此很难简单判断说 “资源不存在”。

通常 RTMP 协议的直播流，如果推流端没有推流了，播放器这边一般是读数据超时后才会返回错误，例如：

$ ffplay rtmp://live.hkstv.hk.lxdns.com/live/hks1
rtmp://live.hkstv.hk.lxdns.com/live/hks1: Input/output error

3.4 不支持的格式

视频流的采用的网络协议、编码格式、封装格式有很多种，网络协议比如 http/https/rtmp/rtsp 等等，编码格式比如 h.264，mpeg4，aac，speex 等等，封装格式比如 flv，mp4，avi，rmvb 等等，这些协议和格式的流，都是需要播放器专门添加支持的，因此，播放器遇到不支持的协议或者格式，也会导致播放失败，如下所示：

https://www.jhuster.com/xxxx.mp4 Protocol not found
http://www.jhuster.com/xxxx.rmvb Invalid data found when processing input

3.5 只有音频没有视频，或者只有视频没有音频

出现该错误的原因可能有如下几点：

- 音频/视频的编码格式不支持，导致解码失败

- 音频/视频的数据内容异常，导致解码失败

- 基于 ffmpeg 的播放器的 `probesize` 设置太小，导致解析码流信息不足

- 码流/文件本身的前半段只有音频没有视频，或者只有视频没有音频

这个问题播放启动流程已经完成，只是出现了画面缺失、或者音频缺失，也算是一种播放失败，限于本文篇幅，该问题后面会抽出专门的章节来分析。

3.6 其他播放失败

上面只分析了常见的播放失败问题，其实导致播放失败的原因还有千千万万种，这里无法一一都列出来，不过通过 ffplay 的报错，就知道大概的原因，再联合服务端一起调试调试，一般都是可以找到根本原因的。下面是 ffmpeg 常见的错误分类：

http://ffmpeg.org/doxygen/trunk/error_8h_source.html

-----------------------------------

直播疑难杂症排查（1）— 播放失败

直播疑难杂症排查（1）- 播放失败

很多刚刚接触css的新手有时会遇到css加载失败这个问题，但测试时，网页上没有显示该样式的问题，这就说明CSS加载失败了。出现这种状况一般是因为的css路径书写错，或者是在浏览器中禁止掉了css的加载，可以重新启动浏览器刷新，在文件中css的调用，一般都是通过link加上你的路径来实现，具体可以看下代码：

<!DOCTYPE html><html><head><meta charset="UTF-8">
<title>index</title>
<link rel='stylesheet' type='text/css' href='./css/index1.css'>
//注意好文件名的书写就没问题了。

造成css加载失败的原因有很多，这可能跟你代码出错，浏览器、路径、编码等等都是有关联的。所以在具体情况具体分析。最常见的失败原因有以下几类：

1.网络原因

IIS空间不足、浏览者网速慢、空间速度慢等网络因素是造成CSS加载失败的原因之一，其具体表现为：当我们打开网页时，网页布局完整，但却没有任何布局样式显示。

2.路径错误或者代码不兼容

如果网页打开时，没有显示CSS设定的样式，只以原始状态显示。那么就可能是我们CSS文件路径出错或者CSS代码不兼容了。

3.if造成失败

第三个原因是，我们编在写CSS时，可能使用了if判断语句对什么浏览器调用什么CSS文件时疏忽造成if调用的混乱，导致在某些浏览器上能正常显示，在某些浏览器上不能正常显示。对于这个原因，解决方法就是好好检查造成CSS加载失败的if判断设置。

4.另类CSS加载失败

何为另类CSS加载失败？这是由于我们本身的CSS代码写法有问题，没有设置好造成在各浏览器显示不同布局差距效果。在CSS里面，我们称为css hack。

5、浏览器导致

在Chrome浏览器的错误控制台下看看css文件有没有加载进来，确定已加载的话，检查元素的类名与CSS中定义的类名是否相同。可能局限于ie浏览器，你用谷歌浏览器就会出现错误。所以尝试换个浏览器，然后等会在用，也可能修复故障。

6、编码不对

如果不是上述问题则看一看你的CSS文件的字符集是否和你的调用CSS文件的网页的字符集是否一致，就是charset属性那里。在你使用浏览器进行浏览效果的时候，ie浏览器中菜单栏上有一个“查看--编码”，在查看编码上面UTF-8或者GBK看看是不是同一个编码。可能是编码不一致所造成。

以上就是造成CSS加载失败最常见的六大原因。我们了解这些原因后，如果在实际操作中遇到类似问题，便可逐一对照排查，对症下药解决问题。

在线咨询

上一篇：关于前端页面，产品经理该如何理解/如何设计
下一篇：java中Filter的用法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商