javascript - 为连接速度慢的用户用图像替换视频

Question

我在我的网页中放置了一个视频，但该视频的尺寸很大，因此对于连接速度较低的用户来说加载速度会很慢。

我希望能够检测用户的网速是高还是低；如果足够高，则播放视频，如果不够高，则用图像替换视频。

这可能吗？

Answer 1

var imageAddr = "some_image_from_any_source"; 
var downloadSize = SizeOfTheImageInBytes;
window.onload = function() {
    window.setTimeout(MeasureConnectionSpeed, 1);
};
function MeasureConnectionSpeed() {
    var startTime, endTime;
    var download = new Image();
    download.onload = function () {
        endTime = (new Date()).getTime();
        showResults();
    }
    download.onerror = function (err, msg) {
        alert('Oops.. some error occured.. please refresh the page..');
    }
    startTime = (new Date()).getTime();
    var cacheBuster = "?nnn=" + startTime;
    download.src = imageAddr + cacheBuster;
    
    function showResults() {
        var duration = (endTime - startTime) / 1000;
        var bitsLoaded = downloadSize * 8;
        var speedBps = (bitsLoaded / duration).toFixed(2);
        var speedKbps = (speedBps / 1024).toFixed(2);
        var speedMbps = (speedKbps / 1024).toFixed(2);
		//code your need according to different network speed..:D
    }
}

尝试使用 jquery/javascript 来检测连接速度..然后同时使用视频和图像标签..根据 jquery 中的条件使其中一个显示为阻止而其他为无..我认为这将有帮助..:D