0

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!

baband
  • 71
  • 9
  • You can use 2 different video tags one for the desktop and one for the mobile and add only one source to the video tag. – DVS Jan 12 '21 at 08:49
  • You could use JavaScript to detect certain features, like touch, gyroscope, features a mobile phone would have. Then add the high or low res video based on that query. – Emiel Zuurbier Jan 12 '21 at 08:50
  • @EmielZuurbier it's probably better to just check the screensize. Since an iPad (and some laptops) also have those features but their screen is probably big enough for the high res video. – Reyno Jan 12 '21 at 08:55

2 Answers2

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>
tripleee
  • 139,311
  • 24
  • 207
  • 268
ahmad
  • 62
  • 3
1

I can see 3 potential approaches here

Checking width of the page in CSS

Since your video have two differences classes , you could code something like this

.des-hidden{
 display: none;
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  .des-hidden{
     display:none
   }
   .mob-hidden{
     display: block;
   }
}

BUT you'll have to change your HTML to something like this, to make it work

<video autoplay muted loop playsinline id="video-1" class="mob-hidden">
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

<video autoplay muted loop playsinline id="video-2" class="des-hidden">
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

Checking width of the page in JS

You could use something like this changing your classes for IDs:

window.addEventListener("resize", function(event) {
    if (document.body.clientWidth <= 768) {
        document.getElementById("des-hidden").style.display = "none";
        document.getElementById("mob-hidden").style.display = "block";
    } else {
        document.getElementById("des-hidden").style.display = "block";
        document.getElementById("des-hidden").style.display = "none";
    }
});

Checking device in Back-End

Depending on your backEnd, if you have one (PHP, Node.Js) , you could check for the user-agent, and decide to display one video or the other

You can look at this if you use PHP : Simplest way to detect a mobile device in PHP

Or if you use NodeJs : Identify if the request is coming from mobile or not

More details

On recent browser, using the display:none CSS property will skip completely the file loading, meaning the video won't even get requested by the browser, saving both loading time and data usage (See Does “display:none” prevent an image from loading?

Using a back-end solution could help to be sure the right video will receive the right video, preventing useless loading time, but it'll be harder for your page to adapt if the width of the page changes after the loading

So I recommend using the CSS option if you don't want to deal with Ajax or nodeJs asynchronsism

Dizio Adil
  • 51
  • 5
  • Thank you for your anwser, the CSS method you reccomended is basically what I'm doing. The thing is that displaying block or none the elements seems not enough to prevent the page to download the source – baband Jan 12 '21 at 09:25
  • I'm taking a look at this, I'll send you a codepen link with a working exemple ! – Dizio Adil Jan 12 '21 at 09:40
  • @baband I updated my answer, and I also created a working exemple : [Video Mediaquery](https://codepen.io/NHCDizio/pen/wvzYKJx) – Dizio Adil Jan 12 '21 at 10:00
  • Thank you very much for your answer and example, I've applied that to my code but unfortunately, the browser keep downloading both desktop and mobile src files – baband Jan 12 '21 at 20:42