提供适合用户连接的视频资产？

Question

我目前正在构建一个网页，该网页具有 8 秒的背景视频作为全视图宽度和视图高度的英雄资产。该视频托管在 vimeo 中，遗憾的是，由于我的客户偏好，YouTube 不适合我。

到目前为止，这是我的 HTML 代码：

<video autoplay playsinline muted loop>
  <source type="video/mp4" src="/my-vimeo-video.hd.mp4">
  <source type="video/webm" src="/my-vimeo-video.hd.mp4">
</video>

目前，该视频在台式机和移动设备上都可以正常播放，并且具有“良好”的 wifi 连接。但是，当与手机连接不良时，就会出现问题。当页面加载时，用户将在开始播放之前看到视频加载。

理想情况下，我想检测用户的连接速度并提供适合连接速度的视频资产。默认视频是高清的，但如果连接不好，我可以提供质量较低的视频。

这样的事情可能吗？如果不是，Web 开发人员通常会如何解决根据用户的连接速度为用户提供最佳视频资产的问题？

基本上我想避免用户导航到页面以查看尝试加载的视频的情况。

我已经简要地查看了网络信息 API，但由于缺乏对 safari 的支持，这对我来说不是一个可行的选择。

提前感谢您的任何想法！

Answer 1

通常，这里的答案是使用像 DASH 这样的技术，它可以在中途进行自适应比特率变化。在源支持的情况下，所有主要的 DASH 播放器都内置了适当调整的比特率切换。如果您使用 Vimeo 的播放器，这将为您处理。

具有 8 秒背景视频的网页

在这种情况下，在中途切换比特率对您没有用处。当您有足够的数据做出决定时，该文件可能已经下载完毕。

我建议改为制作可接受的最低质量比特率的文件，并将其提供给所有人。对于那些没有带宽快速加载背景视频的人，我建议使用静态图像背景作为后备。

Answer 2

这是一种快速的方法，即测量用户的连接速度，然后在客户端根据这些速度决定要获取的视频。并根据这些条件执行客户端重定向。

var imageAddr = "http://www.tranquilmusic.ca/images/cats/Cat2.JPG" + "?n=" + Math.random();
var startTime, endTime;
var downloadSize = 5616998;
var download = new Image();
download.onload = function () {
    endTime = (new Date()).getTime();
    showResults();
}
startTime = (new Date()).getTime();
download.src = imageAddr;

function showResults() {
    var speedMbps = (speedKbps / 1024).toFixed(2);
    if (speedMbps > requiredSpeed) {
     window.location.replace("http://you-website.com/video?heigher_quality=True");
     } else {
       window.location.replace("http://you-website.com/video?heigher_quality=False");  
      }
}