CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nani
Nani

Reputation: 446

Replacing a video with an image for users with slow connection

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?

Upvotes: 1

Views: 1973

Answers (2)

adarsh mohan
adarsh mohan

Reputation: 21

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

Upvotes: 1

Hammer
Hammer

Reputation: 8888

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.

Upvotes: 0

Related Questions