जे एस के साथ वीडियो तत्वों में src के साथ वीडियो-src की जगह के बाद DOMContentLoaded वीडियो को मारता है

वोट
0

मैं अलग वीडियो तत्वों के आधार अगर यह मोबाइल या डेस्कटॉप पर है लोड करने के लिए कोशिश कर रहा हूँ। तो मैं तत्व हटा रही हूं और एक मैं जे एस का उपयोग कर की जरूरत है जैसा कि नीचे दिखाया पर src के साथ वीडियो-src की जगह। इस कोड काम करता है, लेकिन यह अगर आप इस तरह src की जगह वीडियो शुरू की नहीं हो रहा है? भले ही वीडियो तत्व है इम सिर्फ एक सफेद वर्ग को देखने और वह सही और काम करना चाहिए। कोई व्याख्या कर सकते हैं आपने ऐसा क्यों नहीं कर सकते हैं और या अगर मैं कर सकते हैं यह किसी भी तरह काम करते हैं?

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

जब पेज पहले पार्स किया गया है वीडियो तत्वों केवल लोड हो रहा है?

09/10/2019 को 12:51
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


2 जवाब

वोट
1

जब आप सेट या बदलने के srcएक की विशेषता <source>तत्व है, तो आप अपनी मूल MediaElement के कॉल करने की आवश्यकता .load()है, ताकि इस बाद स्रोत फिर से निरीक्षण विधि।

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>

09/10/2019 को 14:06
का स्रोत उपयोगकर्ता

वोट
0

हाँ तुम कर सकते हो! इस खाली तत्व है कि हम शीर्ष पर बना ऊपर वीडियो तत्व धक्का। इस तो पुन: लोड और किसी भी तरह वीडियो शो बनाता है। अगर किसी को समझा जा सके क्यों यह जरूरी है कि मैं बहुत आभारी होंगे।

<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>
09/10/2019 को 13:24
का स्रोत उपयोगकर्ता

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