Serving a video asset suitable for the user's connection

HTML-CSS
1

Hi everyone,

I am currently building a web page that has an 8 second background video as a full view width and view height hero asset. The video is hosted in vimeo, youtube is sadly not an option for me due to my clients preferences.

Here is my HTML code so far:

<video autoplay playsinline muted loop>
  <source type="video/mp4" src="/my-vimeo-video.hd.mp4">
  <source type="video/webm" src="/my-vimeo-video.hd.mp4">
</video>

Currently the video is working as I would like it to on desktop and on mobile with a ā€˜goodā€™ wifi connection. However the issue arrises when on a bad connection with a mobile. As the page loads the user will see the video loading before it is able to start playing.

Ideally I would like to detect the users bandwidth and serve a video asset suitable for the bandwidth. The default video would be hd but if the connection is not good then I could serve a lower quality video. Is something like this possible? If not how would a web developer usually get around the issue of serving the best video asset possible to the user based on the userā€™s bandwidth?

Edit: Iā€™m conscious that the way around this issue may be to use javascript in some way. I which case Iā€™m happy to move this thread to the JS section. Just wasnā€™t sure where to ask this question.

Thanks in advance for any ideas!

2

Vimeo does adaptive streaming based on the connection speed. Iā€™m pretty sure that is already the best way to handle this. You can test the ā€œadaptivenessā€ using the network throttle in Chrome

You can do some calculation and make some general guesstimate.

There is an API but it has very poor browser support.


https://caniuse.com/#feat=netinfo

1 Like