javascript - 如何根据网速播放 gif 或视频？

Question

我目前正在构建这个使用视频背景作为登录页面的网站，但如果网速较慢，他们想播放 gif。他们告诉我有这个网站叫http://elevationchurch.com那是他们想要的 99%，所以我使用那个页面作为引用，但不知道他们会如何改变它。我的意思是我虽然这是一个媒体查询，但后来我的笔记本电脑开始向我显示 Gif 并且是一个 4k 屏幕。我知道他们在 WP 上有它，但我不知道是插件还是什么。

解决此类功能的最佳方法是什么？

到目前为止，这是我的代码(非常简单):

 <section class="mainBG" style="background-image: url(assets/img/gihty.gif);">
    <div class="d-flex align-items-center h-100 justify-content-center">
        <div class="col-md-6 text-white text-center">
            <p>LAST SERMON</p>
            <h1>SERMON TITLE</h1>
            <a href="#" class="btn btn-light btn-wide">WATCH NOW</a>
            <p class="lead mt-3">VIEW MORE SERMONS</p>
        </div>
    </div>
    <div class="col-md-12 text-white d-flex align-items-center justify-content-center py-2" style="background-color: rgba(17, 17, 17, 0.73); position: absolute; bottom: 0;">
        <p class="my-auto text-center text-md-left">Join Us for Praise Party 2017</p>
        <button class="btn btn-light mx-3">Learn More</button>
    </div>
</section>

Answer 1

首先，我会引用this question为了在 Javascript 中获得互联网速度(您可以使用 navigator.connection.downlink, see the documentation)。

然后，根据获得的速度，我会将正确的元素插入到 HTML 中。

  const speed = getSpeed();
  const playable = document.getElementById("my-playable");
  /* Play gif */
  if (speed < minSpeed)
      playable.innerHTML = "<img src='...'>"; /* Insert an image (the gif) */
  else
      playable.innerHTML = "<video src='...-'></video>" /* Insert the video */