Skifte video-src med src i video elementer med JS etter DOMContentLoaded dreper video

stemmer
0

Jeg prøver å laste separate videoelementer avhengig av om det er på mobil eller stasjonær. Så jeg sletter elementet og erstatte video-src med src på den jeg trenger hjelp JS som vist nedenfor. Denne koden fungerer, men det ser ut videoen ikke blir satt i gang hvis du bytter src som dette? Im bare ser en hvit firkant selv om video element er der og alt korrekt og skal jobbe. Kan noen forklare hvorfor du ikke kan gjøre dette og eller om jeg kan gjøre det arbeidet liksom?

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

Har video elementer bare få lastet når siden først analyseres?

Publisert på 09/10/2019 klokken 12:51
kilden bruker
På andre språk...                            


2 svar

stemmer
1

Når du angi eller endre srcegenskap av et <source>element, må du ringe foreldrene sine MediaElement sin .load()metode, slik at sistnevnte gjen inspiserer kilden.

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>

Svarte 09/10/2019 kl. 14:06
kilden bruker

stemmer
0

Ja det kan du! Dette skyver video element ovenfor tomt element som vi gjør på toppen. dette så laster og gjør videoen viser en eller annen måte. Hvis noen kan forklare hvorfor dette er nødvendig Jeg setter stor pris.

<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>
Svarte 09/10/2019 kl. 13:24
kilden bruker

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