移动/低速连接优化-全背景视频
我正在开发一个完整的背景视频网站。
为了优化低速连接/移动，我使用媒体查询来检测小于768 px的屏幕大小，然后执行显示:在视频容器上没有显示，而是显示背景图像。
我的问题是：
这是优化低速连接/移动的正确方法吗？当不使用css显示容器时，它会对我的优化产生任何影响吗?还是应该在加载页面时用JavaScript进行呢？
回答 2
Stack Overflow用户
发布于 2014-10-21 18:51:10
媒体查询将允许您加载不同的图像，如果它们被设置为背景，所以这是一个小屏幕的开始，但不是在计算机上的低速，它将不工作的情况下，一个视频，或附加的文件正在加载或不。
在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文件(称为代理页)。
从您选择的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');
}
?>Stack Overflow用户
发布于 2014-10-21 19:34:38
你用什么做你的视频播放器？
对于您正在做的事情，答案将是jQuery，而不是CSS。对于视频，重要的是要知道用户的带宽是什么，这样您就可以提供正确的视频分辨率。大多数手机都能支持1080 p分辨率(通常是双倍的，尤其是苹果的Retina显示屏，或者三星的5K屏幕)。换句话说，不管他们使用的是手机还是电影显示器，重要的是他们的连接速度。
我在JWPlayer和使用亚马逊S3存储方面都很幸运。这也是我的经验，H.264 MP4是前进的道路。
无论您使用的是什么，您都应该能够提供多个版本的视频。例如，您可能创建不同的分辨率- 360,720和1080。
这里有一个jQuery实用程序，可以用来确定用户的带宽。确保创建一个名为"10.kb.file.zip“的文件(并确保它正好是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 < 128路由为默认360 p视频，将kBs > 128路由到720 p视频。
在JWPlayer中，你会将你所有的视频添加到“播放列表”中，并给它们贴上标签，比如“360 p”、“720 p”等等。
https://stackoverflow.com/questions/26492135
复制相似问题
腾讯云开发者
