CODEWITHSUNDEEP
javascripthtmlcsshtml5-video
baband
baband

Reputation: 123

prevent video to download certain source on mobile

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!

Upvotes: 0

Views: 1055

Answers (2)

Dizio Adil
Dizio Adil

Reputation: 53

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

Upvotes: 1

ahmad
ahmad

Reputation: 57

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>

Upvotes: 2

Related Questions