Как создать несколько видеоплееров на одной HTML-странице - PullRequest
Новая
       33

Как создать несколько видеоплееров на одной HTML-странице

0 голосов
/ 29 мая 2018

У меня проблема с API YouTube: я занимаюсь разработкой веб-сайта и хочу, чтобы видео открывалось, когда я открываю его относительное изображение: я использовал этот код для первого из них, и он работает: 

              <script>
                // 2. This code loads the IFrame Player API code asynchronously.
               // var tag = document.createElement('script');

               // tag.src = "https://www.youtube.com/iframe_api";
                //var firstScriptTag = document.getElementsByTagName('script')[0];
                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


                 function onYouTubeIframeAPIReady() {
                  player = new YT.Player('player', {
                    height: '360',
                    width: '640',
                    videoId: 'M7lc1UVf-VE',
                    events: {
                      'onReady': onPlayerReady,
                      'onStateChange': onPlayerStateChange
                    }
                  });
                }
              </script>
              <button class="btn btn-primary" data-dismiss="modal" type="button">
                <i class="fa fa-times"></i>
                Chiudi</button>
            </div>

Теперь, если я поместил тот же код на другую фотографию с другим видео на той же странице, он не работает, и я получаю эту ошибку: «Ошибка типа: Невозможно прочитать свойство parentNode из undefined».(если я нажму на другое фото, оно не отобразит видео, даже если я изменю ссылку) (я довольно новичок в Boostrap и JS), если вы можете дать мне несколько советов, которые я был бы признателен, спасибо и хорошего дня (извинитеза мой ломаный английский)

1 Ответ

0 голосов
/ 29 мая 2018

пожалуйста, попробуйте этот код, потому что я не понимаю вашу цитату, вы можете использовать этот код.я думаю, что этот код полезен.

Так как в вопросе, который вы упоминаете, есть только два тега видео с одинаковыми источниками, здесь есть возможность.Идея заключается в следующем: 

<--script-->

    var myvid = document.getElementById('myvideo');

    myvid.addEventListener('ended', function(e) {
      // get the active source and the next video source.
      // I set it so if there's no next, it loops to the first one
      var activesource = document.querySelector("#myvideo source.active");
      var nextsource = document.querySelector("#myvideo source.active + source") || document.querySelector("#myvideo source:first-child");

      // deactivate current source, and activate next one
      activesource.className = "";
      nextsource.className = "active";

      // update the video source and play
      myvid.src = nextsource.src;
      myvid.play();
    });


<!--html-->
    <video id="myvideo" width="320" height="240" controls style="background:black">
      <source class="active" src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
      <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" />
    </video>
...