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

首先，我会参考这个问题来获取Javascript中的互联网速度（您可能可以使用navigator.connection.downlink，请参阅文档）。

然后，根据获得的速度，我将正确的元素插入到 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 */