Question

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

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

我的问题是：

这是优化低速连接/移动设备的正确方法吗？当不显示带有css的容器时，它会对我的优化产生任何影响吗？或者我在加载页面时是否应该在JavaScript中执行此操作？

Answer 1

媒体查询将允许您加载不同的图像（如果它们被设置为背景），这对于小屏幕来说是一个开始，但对于计算机上的低速则不是，并且在视频的情况下它不起作用，或者正在加载的附加文件。

在JS

中

这是我现在能想到的，可能不太可靠，因为这取决于你网站上的内容。

它只包括加载最重要的东西（低速连接），并获得内容（DOM，图像，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文件（称为代理页面）。 / p>
从您选择的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'); } ?>

Answer 2

你有什么用作视频的播放器？

对于你正在做的事情，答案将是jQuery，而不是CSS。对于视频，了解用户的带宽非常重要，这样您才能提供正确的视频分辨率。大多数手机都支持1080p分辨率（通常是双倍，特别是Apple的Retina显示屏，或三星的5K屏幕）。换句话说，如果他们使用的是手机或电影院，那就无所谓了。重要的是他们的连接速度。

我与JWPlayer好运并使用Amazon S3进行存储。我的经验也是H.264 MP4的出路。

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

这是一个jQuery实用程序，可用于确定用户的带宽。确保创建一个名为＆＃34; 10.kb.file.zip＆＃34;的文件。（并确保它正好是10 kb）。

/*
*   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'); 
});

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

例如，我路由了kBs＆lt; 128到默认为360p视频，并且kBs＆gt; 128到720p视频。

在JWPlayer中，您可以将所有视频添加到＆＃34;播放列表＆＃34;并给他们标签像＆＃34; 360p＆＃34;，＆＃34; 720p＆＃34;等

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

2 个答案:

在JS

在PHP中