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开发人员通常将如何解决基于用户的连接速度为用户提供最佳视频资产的问题？

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

我已经简要介绍了Network information 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");  
      }
}

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

2 个答案: