使用 JS 媒体查询为移动/桌面加载不同的“视频”元素

Question

I'm trying to load separate video elements depending if it is on mobile or desktop. So i'm deleting the unnecessary element and replacing video-src with src on the element i'm keeping using JS and media queries as shown below. This code works but it seems the video doesn't get initiated if you replace the src like this? Im just seeing a white square even though the video element is there and all correct and should be working. Can someone explain why you can't do this and or if i can make it work somehow?

<video desktop class="i-delete-this-on-mobile" width="100%" height="100%" muted playsinline loop autoplay>
    <source type="video/mp4"
        video-src="https://player.vimeo.com/external/36742.hd.mp4?s=55921529d3beb0cd8f4a58c85e010f7de&profile_id=174">
</video>


<video mobile class="i-delete-this-on-desktop" width="100%" height="100%" muted playsinline loop autoplay>
    <source type="video/mp4"
        video-src="https://player.vimeo.com/external/365742.hd.mp4?s=55921529d3beb0cbddf8f4e010f7de&profile_id=174">
</video>

<script>
    document.addEventListener("DOMContentLoaded", function () {

        var desktopvideoEl = document.querySelectorAll('.i-delete-this-on-mobile');
        var mobilevideoEl = document.querySelectorAll('.i-delete-this-on-desktop');

        function displayImages(mobileSize2) {
            if (mobileSize2.matches) { // if mobile
                for (var i = 0; i < desktopvideoEl.length; i++) { //for each desktop video element
                    desktopvideoEl[i].parentNode.removeChild(desktopvideoEl[i]); // remove desktop video element
                    if (mobilevideoEl[i].children[0].getAttribute('video-src')) { //if mobile video element contains a child of video-src
                        mobilevideoEl[i].children[0].setAttribute('src', mobilevideoEl[i].children[0].getAttribute('video-src')); //change mobile source video-src element to src 
                        mobilevideoEl[i].children[0].removeAttribute('video-src'); //remove old video-src tag
                    }
                }
            } else { //if desktop
                for (var i = 0; i < mobilevideoEl.length; i++) { //for each mobilevideo element
                    mobilevideoEl[i].parentNode.removeChild(mobilevideoEl[i]); // remove mobile video element
                    if (desktopvideoEl[i].children[0].getAttribute('video-src')) { //if desktop video element contains a child of video-src
                        desktopvideoEl[i].children[0].setAttribute('src', desktopvideoEl[i].children[0].getAttribute('video-src')); // change desktop source video-src to src
                        desktopvideoEl[i].children[0].removeAttribute('video-src'); //remove old video-src tag
                    }
                }
            }
        }

        //js media query
        var mobileSize2 = window.matchMedia("(max-width: 767px)");

        //run function at runtime
        displayImages(mobileSize2);
    });
</script>

Do video elements only get loaded when the page is first parsed? Because when I manually move the new video element anywhere in the dom using the chrome dev tools it instantly shows. Is there a way to replicate that movement with code so it 'refreshes' the video element?

Answer 1

When you set or change the src attribute of a <source> element, you need to call its parent MediaElement's .load() method so that this latter re-inspects the source.

 window.onload = (e) => { const url = "https://upload.wikimedia.org/wikipedia/commons/transcoded/a/a4/BBH_gravitational_lensing_of_gw150914.webm/BBH_gravitational_lensing_of_gw150914.webm.480p.webm"; // set both <source> element's src const sources = document.querySelectorAll( 'source' ); sources.forEach( (source) => source.src = url ); // call.load() only on the second <video> document.querySelector( '.reload-me' ).load(); };

 <div> Without load()<br> <video controls> <source> </video> </div> <div> With load()<br> <video controls class="reload-me"> <source> </video> </div>

Answer 2

yes you can. this pushes the video element above the empty element that we make at the top. this then reloads and makes the video show somehow. If someone could explain why this is necessary I would greatly appreciate.

<video class="i-delete-this-on-mobile" width="100%" height="100%" muted playsinline loop autoplay>
    <source type="video/mp4"
        video-src="https://player.vimeo.com/external/365229742.hd.mp4?s=55921529d3beb0cb372df8f919a58c85e010f7de&profile_id=174">
</video>


<video class="i-delete-this-on-desktop" width="100%" height="100%" muted playsinline loop autoplay>
    <source type="video/mp4"
        video-src="https://player.vimeo.com/external/365229742.hd.mp4?s=55921529d3beb0cb372df8f919a58c85e010f7de&profile_id=174">
</video>


<script>
    document.addEventListener("DOMContentLoaded", function () {

        var desktopvideoEl = document.querySelectorAll('.i-delete-this-on-mobile');
        var mobilevideoEl = document.querySelectorAll('.i-delete-this-on-desktop');

        function displayImages(mobileSize2) {
            if (mobileSize2.matches) { // if mobile
                for (var i = 0; i < desktopvideoEl.length; i++) { //for each desktop video element
                    desktopvideoEl[i].parentNode.removeChild(desktopvideoEl[i]); // remove desktop video element
                    if (mobilevideoEl[i].children[0].getAttribute('video-src')) { //if mobile video element contains a child of video-src
                        mobilevideoEl[i].children[0].setAttribute('src', mobilevideoEl[i].children[0].getAttribute('video-src')); //change mobile source video-src element to src 
                        mobilevideoEl[i].children[0].removeAttribute('video-src'); //remove old video-src tag
                        if(mobilevideoEl[i].previousElementSibling){mobilevideoEl[i].parentNode.insertBefore(mobilevideoEl[i], mobilevideoEl[i].previousElementSibling)};//THIS MOVES ELEMENT ABOVE THE EMPTY DIV AND RELOADS THE VIDEO ELEMENT
                    }
                }
            } else { //if desktop
                for (var i = 0; i < mobilevideoEl.length; i++) { //for each mobilevideo element
                    mobilevideoEl[i].parentNode.removeChild(mobilevideoEl[i]); // remove mobile video element
                    if (desktopvideoEl[i].children[0].getAttribute('video-src')) { //if desktop video element contains a child of video-src
                        desktopvideoEl[i].children[0].setAttribute('src', desktopvideoEl[i].children[0].getAttribute('video-src')); // change desktop source video-src to src
                        desktopvideoEl[i].children[0].removeAttribute('video-src'); //remove old video-src tag
                        if(desktopvideoEl[i].previousElementSibling){desktopvideoEl[i].parentNode.insertBefore(desktopvideoEl[i], desktopvideoEl[i].previousElementSibling)};//reloads desktop element
                    }
                }
            }
        }

        //window.addEventListener("resize", displayImages);

        //js media query
        var mobileSize2 = window.matchMedia("(max-width: 767px)");

        //run function at runtime
        displayImages(mobileSize2);
    });
</script>