Het vervangen van video-src met src in video-elementen met JS na DOMContentLoaded doodt video

stemmen
0

Ik probeer te laden afzonderlijke video-elementen afhankelijk van of het op de mobiele of desktop. Dus ik ben het verwijderen van het element en het vervangen van video-src met src aan de ene ik nodig met behulp van JS zoals hieronder weergegeven. Deze code werkt, maar het lijkt erop dat de video niet wordt gestart als je de src als dit vervangen? Im alleen het zien van een wit vierkant, hoewel de video element is er en allemaal correct en zou moeten werken. Kan iemand uitleggen waarom u dit niet kunt doen en of ik kan laten werken of andere manier?

<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 
                        desktopvideoEl[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>

Heeft video-elementen alleen worden geladen wanneer de pagina voor het eerst wordt ontleed?

De vraag is gesteld op 09/10/2019 om 12:51
bron van user
In andere talen...                            


2 antwoorden

stemmen
1

Bij het instellen of wijzigen van de srceigenschap van een <source>element, moet je de bovenliggende MediaElement noemen .load()methode, zodat deze laatste re-inspecteert de bron.

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>

antwoordde op 09/10/2019 om 14:06
bron van user

stemmen
0

ja je kan! Dit duwt de video-element boven de lege element dat we aan de top. dit dan laadt en maakt de video toont een of andere manier. Als iemand zou kunnen verklaren waarom dit noodzakelijk is, zou ik het zeer op prijs stellen.

<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>
antwoordde op 09/10/2019 om 13:24
bron van user

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more