Question

我对YouTube API有疑问：我正在开发一个网站，当我打开他的相对图像时，我想要一个视频开始：我将这个代码用于第一个并且它可以工作：

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

现在，如果我将相同的代码放在另一张照片中并且同一页面上有另一个视频，那么它无法正常工作adn会给我这个错误：＆＃34; TypeError：无法读取属性＆＃39; parentNode＆＃39 ;未定义＆＃34;。（如果我点击其他照片，即使我更改了参考，它也不会显示视频）（我对boostrap和js很新）如果你能给我一些提示我会很感激，谢谢，祝你有个美好的一天（抱歉我的英语不好）

Answer 1

请尝试此代码，因为我不明白您的引用，您可以使用此代码。我认为这段代码很有用。

正如你在提到的问题中只提到两个具有相同来源的视频标签一样，这是一种可能性。这个想法如下：

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

如何在一个html页面中拥有多个视频播放器

1 个答案: