对于连接缓慢的用户，将视频替换为图像

Replacing a video with an image for users with slow connection

本文关键字：视频 替换 图像 用户 于连接 连接 缓慢      更新时间：2023-09-26

我已经在我的网页上放置了一个视频，但是这个视频的大小很大，所以对于连接速度较低的用户来说，它会加载缓慢。

我希望能够检测用户是否有高或低的互联网速度;如果足够高，则播放视频，如果不够高，则将视频替换为图像。

这是可能的吗?

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中的条件，使其中一个显示为block，另一个显示为none。D

有两种方法，

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

2)如果它必须在客户端完成，http://ditio.net/2008/08/06/detect-connection-speed-with-javascript/给出了一个很好的例子来检测互联网连接速度，在那里你可以应用你的逻辑。

相关文章：