perhaps the humble minds (Marten) and the bright ones (all other) might have a clue:
I have a new website:
You see the videos I play in the background. But on slow internet-connections, it takes some time to load. In these cases, I would like to omit the videos and display an image only.
How can I find a way to distinguish the internet-speed of the visitors and load/not load the video?
I just had a quick browse of Stack Overflow, to see if there were any hints on the subject.
Although there are a couple of methods documented (like forcing the download of an image and measuring how long it takes) there’s certainly a lot of potential issues with trying to gain an accurate sample of network speeds.
Your safest bet is probably to optimise the loading for everybody - rather than just focusing on those with the slowest internet connections.
Additionally a growing number of web browsers block autoplaying video content. Safari and Firefox is on that list, together with iOS and Android. Others are likely to follow.
As pretty as your video background looks, regretfully I think you might have to swap it for a static JPG image.
If you really want video then I would compress it more. Given that it is just background and the subject matter is somewhat blurry any way then just compress it more. Running it though Handbrake with he RF set to 35 reduced it from 2.3 MB to 821kB. The lower quality is discernible but in this case I would say acceptable - here is the compressed version: https://bwd.d.pr/8BZ993
Being slightly less aggressive on the compression gets it to 1.3MB without too much apparent loss in quality.
How about just loading a “picture” of the video on mobiles, that when clicked loads the video. Do a screen capture of video, and nobody will know the difference.
Thanks 4all - I reduced the size of the videos, so that should be fine now. @Raimo I want the video to run in the background, so the user will not likely click there at all. Otherwise - yes.