CODEWITHSUNDEEP
htmlvideo
JTR
JTR

Reputation: 345

Change HTML5 Video Source for Mobile

Should be an easy answer for someone hopefully, the site I'm making has video that I dont want to load on mobile.

Want to know if there is a way to change the source of each video for screens smaller than 800px width to a 1kb video, but on a desktop it plays the full video,

I'm not trying to lower quality for mobile users, mobile users won't see the videos at all because they are replaced with images to save on their data. I want to stop the videos from loading at all in the background for mobile users as I don't want them downloading videos that aren't included in their version of the site, if I can't stop them loading at all below 800px then is it possible to replace the source at that breakpoint with a 1kbvideo as a kind of hack to save mobile data.

<video autoplay loop id="video-background" muted plays-inline>
<source src="VIDEO/BG-VID.mp4" type="video/mp4"> 
<source src="VIDEO/1kb-vid.mp4" type="video/mp4"> 
</video>

Upvotes: 5

Views: 4676

Answers (2)

JTR
JTR

Reputation: 345

This javascript seems to be what I was looking for,

$(document).ready(function(){
var screenWidth = $(window).width();
if (screenWidth < 800){
    $('video').removeAttr('autoplay');
} else {
$('video').attr('autoplay');
}
});

Upvotes: 1

cloned
cloned

Reputation: 6742

Mobile users can easily display full HD videos, it's just the breakpoints that are set to 400px (or whatever). This doesn't mean they don't have HD resolution, in fact many mobile devices have higher resolutions. Youtube, Netflix, they all load in HD on mobile devices.

mediaqueries in source tags is not supported anymore, this was only possible a few years back.

People don't want to see lower resolution videos on mobile devices, they want to see the full resolution videos (if their bandwith allows it)

That's why the only way to implement this is the same way Netflix or Youtube implement such things: Sending videos with different sizes to different bandwiths dynamically. Meaning they change during playback, there is no way to define this in a fixed way.

Your solution to your problem is MPEG-Dash, this requires a bit of work on the server and also a specific encoding of the videos. Since this is quite a big topic, I will just link one (good?) tutorial, but if you search for MPEG-Dash you can find much more information.

Upvotes: 1

Related Questions