Remplacement vidéo src avec src des éléments vidéo avec JS après DOMContentLoaded tue vidéo

voix
0

Je suis en train de charger des éléments vidéo séparés selon qu'elle est sur mobile ou de bureau. Je suis donc supprimer l'élément et le remplacement de la vidéo src avec src sur celui que je besoin de l'aide de JS comme indiqué ci-dessous. Ce code fonctionne, mais il semble que la vidéo ne soit pas lancée si vous remplacez le src comme ça? Im juste voir un carré blanc, même si l'élément vidéo est là et tout correct et devrait fonctionner. Quelqu'un peut-il expliquer pourquoi vous ne pouvez pas le faire et ou si je peux le faire fonctionner en quelque sorte?

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

Est-ce que des éléments vidéo ne se charger lorsque la page est d'abord analysée?

Créé 09/10/2019 à 12:51
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
1

Lorsque vous définissez ou modifiez l' srcattribut d'un <source>élément, vous devez appeler de son parent MediaElement .load()méthode de telle sorte que cette dernière ré-inspecte la 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>

Créé 09/10/2019 à 14:06
source utilisateur

voix
0

Oui, vous pouvez! ce qui pousse l'élément vidéo ci-dessus l'élément vide que nous faisons au sommet. ce fait et puis recharge le spectacle vidéo en quelque sorte. Si quelqu'un pourrait expliquer pourquoi cela est nécessaire, je serais très reconnaissant.

<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>
Créé 09/10/2019 à 13:24
source utilisateur

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