Замена видео-Src с СРК в видеоэлементы с JS после DOMContentLoaded убивает видео

голоса
0

Я пытаюсь загрузить отдельные видео элементы в зависимости, если он находится на мобильный или рабочий стол. Так что я удалить элемент и заменить видео-Src с СРК на одном я нужно с помощью JS, как показано ниже. Этот код работает, но это, кажется, видео не становится инициатором, если заменить СРК, как это? Я просто видим белый квадрат, даже если элемент видео есть и все правильно и должно работать. Может кто-то объяснить, почему вы не можете сделать это, и, или если я могу заставить его работать так или иначе?

<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