How to use Modernizr for user bandwidth detection?

Question

I currently building full background website with video. I make background image sliding, just in case if user internet just run slow. I want to achieve it with modernizr, or any way if possible.

my concept :
if user bandwidth is fast --> using video,
if user bandwidth is slow --> using image sliding.

Here my code.

<div id="con">
    <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
    </video>
    <div id="imgslide" style="display: none;">
        <img src="img1.png"/>
        <img src="img2.png"/>
    </div>
</div>

I appreciate for your help.

I've just done this fairly successfully for a project and am in the process of writing a blog post about it – I'll drop the link here when it's finished. — Stu Cox, Aug 14 '13 at 12:58

score 4 · Accepted Answer · edited May 23 '17 at 11:59

4

As you can see here, a lowbandwidth test was available with Modernizr.

As mentioned in the comments, the detection was based only on the device information.

Unluckily it has been removed due to this issue.

Anyway, other mechanisms have been shown to be effective, and you can also have a look at libraries like jsbandwidth, foresight or boomerang.

edited May 23 '17 at 11:59

Community

1
1

answered Mar 16 '14 at 19:28

alexcasalboni

1,726
1
16
26

How to use Modernizr for user bandwidth detection?

1 Answers1