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?
Thanks in advance for any ideas!