change video source before play using jquery

Question

I'd like to be able to change the video source before it starts to play based on a media query using javascript/jquery. The premise being, if the screen resolution is below a certain value then the device is mobile and lets assume it is on a mobile network so load the lower resolution video.

The following works, but I get a 'glitch' as the original video loads before jQuery does it's thing and changes the video source. I've looked into using the media query built into the html5 video tag but understand that it has limited support.

<style>
#mobile-indicator {
display: none;
}

@media (max-width: 767px) {
    #mobile-indicator {
        display: block;
    }
}
</style>

the html is as follows

<script type="text/javascript">
    (function($){
        $(window).on("load",function(e){
            $('video source').each(function(){
                var isMobile = $('#mobile-indicator').is(':visible');
                if (isMobile == true){
                    var videoSrc = ($(this).attr('src'));
                    var videoSmall = $(this).attr('src').replace('.mp4', '_small.mp4');
                    $(this).attr('src', videoSmall);
                    $("video")[0].load();
                    //console.log(newExt);
                }
            });

        });
    })(jQuery);
</script>
<div class="bg_video">
    <video class="video" poster="<?PHP echo $bg_image; ?>" id="bg_video" playsinline autoplay muted loop >
        <source src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4">
    </video>
</div>
<div id="mobile-indicator"></div>

Any ideas how I can do the media query before the video starts to play? Cheers, Philip

I've created a codepen that demonstrates the problem

[UPDATE based on VC.One's solution]

<script type="text/javascript">
    (function($){
        $(window).on("load",function(e){
            $('video source').each(function(){
                var isMobile = $('#mobile-indicator').is(':visible');
                var videoSrc = 'images/backgrounds/<?PHP echo $bg_video; ?>';
                if (isMobile == true){
                    var videoSmall = videoSrc.replace('.mp4', '_small.mp4');
                    $(this).attr('src', videoSmall);
                }else{
                    $(this).attr('src', videoSrc);  
                }
                $("video")[0].load();
            });

        });
    })(jQuery);
</script>
<div class="bg_video">
    <video class="video" <?PHP echo ($bg_image !="") ? 'poster="' . $bg_image . '"' : ''; ?>" id="bg_video" playsinline autoplay muted loop >
        <source src="images/backgrounds/null.mp4" type="video/mp4">
    </video>
</div>

Answer 1

It seems a simple If/Else statement works. Let me know how it goes.

(1) HTML : Use a dummy URL like null.mp4 so nothing is loaded by video tag at start.

<div class="bg_video">
    <video class="video" poster="<?PHP echo $bg_image; ?>" id="bg_video" playsinline autoplay muted loop >
    <source src="null.mp4" type="video/mp4">
    </video>
</div>

(2) JS : Use an If/Else statement in your JavaScript code.

(function($)
{
    $(window).on("load",function(e)
    {
        $('video source').each(function()
        {
            var isMobile = $('#mobile-indicator').is(':visible');

            if (isMobile == true)
            {
                alert("is mobile");
                var videoSmall = "https://www.w3schools.com/html/mov_bbb.mp4";
                $(this).attr('src', videoSmall);
            }
            else
            {
                alert("not mobile");
                var videoLarge = "https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4";
                $(this).attr('src', videoLarge);
            }

            $("video")[0].load();

        });
    });
})(jQuery);