如何根据互联网速度播放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 */