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

Answer 2

有两种方法，

1）有些视频服务提供商可以根据您的设备功能和网络速度提供正确的配置文件，例如https://www.brightcove.com/en/once

2）如果必须在客户端完成，http://ditio.net/2008/08/06/detect-connection-speed-with-javascript/提供了一个检测互联网连接速度的好例子，您可以在其中应用逻辑。

用连接速度慢的用户替换带有图像的视频

2 个答案: