Replacing a video with an image for users with slow connection

Question

I have placed an video in my webpage but that video is large in size, so it will load slowly for users with a low connection speed.

I want to be able to detect if the user has a high or low Internet speed; if it's high enough, the video plays, and if not, the video is replaced with an image.

Is this possible to do?

adarsh mohan · Answer 1 · 2015-06-03T18:05:29.187

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
    }
}

try using jquery/javascript to detect the connection speed.. then use both video and image tags.. according to the conditions in the jquery make the display of one of them to block and other to none.. i think this will be helpful..:D

i found this code from somewhere in stackoverflow.. bt dont know from where it is.. i have edited it a little.. maybe this can help you... i have edited the post for you..:D — adarsh mohan, Jun 03 '15 at 18:03
Perhaps this [answer](https://stackoverflow.com/questions/5529718/how-to-detect-internet-speed-in-javascript/5529841#5529841)? — , Jun 03 '15 at 18:46

score 0 · Answer 2 · answered Jun 02 '15 at 04:36

There are two ways,

1) There are some video service providers can deliver the right profile based on your device capability and network speed, such as https://www.brightcove.com/en/once

2) if it has to be done on client side, http://ditio.net/2008/08/06/detect-connection-speed-with-javascript/ gives a good example to detect the internet connection speed, where you can apply your logics on.

Replacing a video with an image for users with slow connection

2 Answers2