如何检测访客网络状况，在网络不佳时显示替代网页或内容？

当然可以解决这个问题！我给你准备了两种实用的方案，既能解决网络慢导致的页面空白，还能兼顾用户体验，结合你的现有代码调整就行～

一、先做视频加载失败的兜底处理 #

你的现有代码里，视频加载失败时虽然有替代链接，但因为样式问题（黑色背景+无样式文字）用户大概率看不到。我们先把兜底内容优化得显眼一点，再通过JavaScript监听视频的error事件，主动触发兜底内容显示：

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <style>
    html{ width:100%; height:100%; }
    body { background: black; position:fixed; width: 100%; height: 100%; margin:0; padding:0;}
    /* 兜底内容：全屏可点击的白色文字 */
    .fallback-content {
      width: 100%;
      height: 100%;
      display: none;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 2rem;
      text-decoration: none;
    }
    .video-container {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body bgcolor="black">
  <!-- 兜底内容 -->
  <a href="/650mah.html" class="fallback-content" id="fallback">点击进入650mAh站点</a>

  <div class="video-container" id="videoContainer">
    <audio autoplay>
      <source src="http://files.cargocollective.com/598079/vape-sound_mixdown.mp3" type="audio/mpeg">
    </audio>
    <!-- 修正了poster的中文引号问题 -->
    <video playsinline id="video1" width="100%" autoplay onended="run()" poster="650mAh">
      <source src="img/lores/vape_text_openingSMALLER.mp4" type="video/mp4">
      <source src="img/lores/vape_text_openingSMALLER.ogv" type="video/ogg">
      <source src="/img/lores/vape_text_openingSMALLER.webm" type="video/webm">
    </video>
    <a href="/650mah.html">
      <video playsinline id="video2" width="100%" poster="http://650mah.com/img/650loop.gif" loop style="display:none;">
        <source src="img/lores/vape_text_loopSMALL.mp4" type="video/mp4">
        <source src="img/lores/vape_text_openingSMALL.ogv" type="video/ogg">
        <source src="img/lores/vape_text_loopSMALL.webm" type="video/webm">
      </video>
    </a>
  </div>

  <script>
    // 监听视频加载错误事件，触发兜底显示
    function showFallback() {
      document.getElementById('videoContainer').style.display = 'none';
      document.getElementById('fallback').style.display = 'flex';
    }

    document.getElementById('video1').addEventListener('error', showFallback);
    document.getElementById('video2').addEventListener('error', showFallback);

    // 保留你原有的视频切换逻辑
    function run(){
      $("#video1").hide();
      $("#video2").show();
      document.getElementById("video2").play();
    };
  </script>
</body>

这个方案的好处是：不管是网速慢还是视频资源加载出错，只要视频无法正常播放，用户就能看到显眼的兜底入口，不会再出现空白页面。

二、主动检测网络速度，提前选择显示内容 #

如果想在页面加载时就预判网速，提前决定显示视频还是兜底内容，可以通过加载一个小文件（比如10KB的图片）计算加载时间来判断网速：

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <style>
    html{ width:100%; height:100%; }
    body { background: black; position:fixed; width: 100%; height: 100%; margin:0; padding:0;}
    .fallback-content {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 2rem;
      text-decoration: none;
    }
    .video-container {
      width: 100%;
      height: 100%;
      display: none; /* 默认隐藏，网速达标后再显示 */
    }
  </style>
</head>
<body bgcolor="black">
  <a href="/650mah.html" class="fallback-content" id="fallback">点击进入650mAh站点</a>

  <div class="video-container" id="videoContainer">
    <audio autoplay>
      <source src="http://files.cargocollective.com/598079/vape-sound_mixdown.mp3" type="audio/mpeg">
    </audio>
    <video playsinline id="video1" width="100%" autoplay onended="run()" poster="650mAh">
      <source src="img/lores/vape_text_openingSMALLER.mp4" type="video/mp4">
      <source src="img/lores/vape_text_openingSMALLER.ogv" type="video/ogg">
      <source src="/img/lores/vape_text_openingSMALLER.webm" type="video/webm">
    </video>
    <a href="/650mah.html">
      <video playsinline id="video2" width="100%" poster="http://650mah.com/img/650loop.gif" loop style="display:none;">
        <source src="img/lores/vape_text_loopSMALL.mp4" type="video/mp4">
        <source src="img/lores/vape_text_openingSMALL.ogv" type="video/ogg">
        <source src="img/lores/vape_text_loopSMALL.webm" type="video/webm">
      </video>
    </a>
  </div>

  <script>
    // 网速检测函数：加载小文件计算速度
    function checkNetworkSpeed(callback) {
      // 换成你自己服务器上的10-50KB小资源（比如图片），避免跨域
      const testUrl = 'img/test-10k.jpg';
      const fileSizeInKB = 10;
      const startTime = new Date().getTime();

      const xhr = new XMLHttpRequest();
      xhr.open('GET', testUrl, true);
      xhr.onload = function() {
        const endTime = new Date().getTime();
        const timeTaken = (endTime - startTime) / 1000; // 转换为秒
        const speedInMbps = (fileSizeInKB * 8) / (timeTaken * 1024); // 转换为Mbps

        // 这里设定1Mbps以下视为慢网络，你可以根据视频大小调整阈值
        callback(speedInMbps < 1);
      };
      xhr.onerror = function() {
        // 连测试资源都加载失败，直接判定为慢网络
        callback(true);
      };
      xhr.send();
    }

    // 页面加载时检测网速
    window.addEventListener('load', function() {
      checkNetworkSpeed(function(isSlow) {
        if (!isSlow) {
          // 网速正常，显示视频并触发播放
          document.getElementById('videoContainer').style.display = 'block';
          document.getElementById('video1').play();
        }
        // 慢网络则保持兜底内容显示
      });
    });

    // 保留视频加载失败的兜底逻辑
    function showFallback() {
      document.getElementById('videoContainer').style.display = 'none';
      document.getElementById('fallback').style.display = 'flex';
    }
    document.getElementById('video1').addEventListener('error', showFallback);
    document.getElementById('video2').addEventListener('error', showFallback);

    function run(){
      $("#video1").hide();
      $("#video2").show();
      document.getElementById("video2").play();
    };
  </script>
</body>

小提示： #

• 测试资源一定要放在自己的服务器上，避免跨域问题，大小选10-50KB最合适，太小检测不准，太大增加额外加载时间
• 网速阈值（比如1Mbps）可以根据你的视频大小调整，比如你的视频是10MB，1Mbps网速加载需要80秒，确实适合直接显示兜底

内容的提问来源于stack exchange，提问作者66t00