javascript - prevent video to download certain source on mobile

Question

I'm building a webpage where I have several video, so I've exported 2 different media for each of them: one high quality to show on desktop and a lower quality one to show on mobile.

To do so I styled my video element like this:

<video autoplay muted loop playsinline id="video-1">
            <source class="mob-hidden" src="video-1.mp4" type="video/mp4">
            <source class="des-hidden" src="video-1-low.mp4" type="video/mp4">
              Your browser does not support HTML5 video.
</video>

where mob-hidden and des-hidden are css classes with a display: none; to prevent them to appear in mobile or desktop.

The problem is that I noticed that when on mobile and desktop the page still downloads both video versions even if it uses just one, so I guess that using css classes is not enough.

Can you help understand how to prevent the webpage to download media that it's not going to use? so low-quality video when on desktop and high-quality videos when on mobile.

Thank you very much!

Answer 1

Try this:

<video controls>
    <source src="the-sky-is-calling-large.mp4" media="screen and (min-width:800px)">
    <source src="the-sky-is-calling-large.webm" media="screen and (min-width:800px)">
    <source src="the-sky-is-calling-small.mp4" media="screen and (max-width:799px)">
    <source src="the-sky-is-calling-small.webm" media="screen and (max-width:799px)">
</video>