优化移动/低速连接-全背景视频

Optimizing for mobile/ low speed connection - full background video

本文关键字：背景 视频 连接 移动 优化      更新时间：2023-09-26

我正在开发一个带有完整背景视频的网站。

为了优化低速连接/移动，我使用媒体查询来检测小于768像素的屏幕大小，然后进行显示：在视频容器上不显示，而是显示背景图像。

我的问题是：

这是针对低速连接/移动进行优化的正确方法吗？当不使用css显示容器时，它会对我的优化产生任何影响吗？或者当加载页面时，我应该使用JavaScript来进行优化吗？

媒体查询将允许您加载不同的图像（如果它们被设置为背景），因此这是小屏幕的开始，但不适用于计算机上的低速，并且在视频或其他文件加载或未加载的情况下都不起作用。

在JS中

这是我目前能想到的，可能不太可靠，因为这取决于你的网站上有多少内容。

它包括只加载最重要的东西（低速连接），并为内容（DOM、images、css、js…）获得大致的加载时间。然后你可以选择加载或不加载其余的。

// get the current time as soon as you can (directly in the head tag)
var start = new Date().getTime();
// do the same after the page has loaded and find out the difference
window.onload = function(){
    var end = new Date().getTime();
    var timeTaken = end - start;
    alert('It took ' + timeTaken + ' ms to load');
    if(timeTaken < 2000){
        // load more stuff if it took less than 2 seconds, for example
    }
}

再次：不太可靠（一个有很多图像的页面需要更长的时间，找到完美的"超时"（此处为2秒）并不容易。此外，这是行不通的，因为你的用户禁用了JS，但这不是我现在担心的问题：）你可能应该等待其他答案。

在PHP中

我能想到的另一种方法是用PHP做这件事，如果你可以选择的话。您可以让php页面获得客户端请求的时间。例如，如果你有一个外部JS，你可以这样做：

index.php

<script src="myScript.php?time=<?=microtime()?>"></script>

myScript.php将是一个php页面，它将获得此请求的时间，并将其与第一个进行比较，然后您可以选择在此基础上提供不同的JS文件（这称为代理页面）。

从你选择的JS文件中，你可以根据你想做的事情加载不同的东西

myScript.php

<?php
    header("Content-Type: text/javascript");
    $start = intval( $_GET['time'] );
    $end = microtime();
    $timeTaken = $end - $start;
    if( $timeTaken < 2000 ){
        echo file_get_contents('JSForHighSpeed.js');
    } else {
        echo file_get_contents('JSForLowSpeed.js');
    }
?>

你用什么作为视频播放器？

对于您正在做的事情，答案将在jQuery中，而不是CSS中。对于视频，了解用户的带宽很重要，这样您才能提供正确的视频分辨率。大多数手机都可以支持1080p分辨率（通常是两倍，尤其是苹果的Retina显示屏或三星的5K屏幕）。换言之，他们使用的是手机还是影院显示屏都不重要；重要的是它们的连接速度。

我在JWPlayer和使用AmazonS3存储方面运气不错。根据我的经验，H.264 MP4是一条不错的选择。

无论你在使用什么，你都应该能够提供多个版本的视频。例如，您可以创建不同的分辨率-360、720和1080。

这里有一个jQuery实用程序，可以用来确定用户的带宽。确保创建一个名为"10kb.file.zip"的文件（并确保它正好是10kb）。

/*
*   measureBandwidth.js
*   Directory: ~/lib/js/
*   jQuery utility for measuring a user's bandwidth
*/
var url = 'js/10.kb.file.zip?{0}';
var start = '';
function getBandwidth(callback) {
    start = new Date();
    getFile(1, callback);
}
function getFile(i, callback) {
    $.get(url.f(Math.random()), function () {
        i++;
        if (i < 6) {
            getFile(i, callback);
        } else {
            var end = new Date();
            var speed1 = Math.round(((50 / ((end - start) * .001) * 8) / 1000) * 10) / 10;
            var speed2 = Math.round(50 / ((end - start) * .001) * 10) / 10;
            callback(speed1, speed2);
        }
    });
}
String.prototype.f = function () { var args = arguments; return this.replace(/'{('d+)'}/g, function (m, n) { return args[n]; }); };

然后，你可以这样使用它：

getBandwidth(function (Mbits, kBs) {
    $('#speed1').html(Mbits + ' Mbit/s');
    $('#speed2').html(kBs + ' kB/s'); 
});

根据这些结果，您可以为用户设置适当的视频。

例如，I路由kBs<128默认为360p视频，kBs>128默认为720p视频。

在JWPlayer中，您可以将所有视频添加到"播放列表"中，并给它们贴上"360p"、"720p"等标签。

相关文章：