Question

我正在尝试使用Youtube API在投资组合风格的网站上维护多个Youtube视频。我希望每个视频都包含在一个模态中，所以当点击缩略图时，模态会打开，里面的视频会自动开始播放。

我引用了这个codepen来获取ID的多个iframe，我使用了click事件并将其绑定到模态关闭按钮以停止所有视频播放实例。一旦模态关闭，这将阻止任何视频继续播放。但我无法弄清楚如何在每次点击的基础上开始播放每个视频。

参考Codepen：https://codepen.io/AliKlein/pen/WoNaoN

使用Zurb Foundation建立此网站

<div class="video-thumbnail">
  <div class="video-play show-in-overlay">
              <a data-toggle="featvideo">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 512 512"><path id="Video-Play" d="M96 64l320 192-320 
  192z"></path>
                </svg>
                </a>
  </div>
<div class="media-item-caption">
                    <h1 class="media-item-caption-title">Title</h1>
  <div class="media-caption-sub"><p>Caption</p>
  </div>
</div>
                <img src="Video1thumb.jpeg">
</div><!-- "video-thumbnail" -->


  <div class="full reveal" id="featvideo" data-reveal>
    <div class="responsive-embed widescreen reveal-content">
        <div id="player1">
             [IFRAME ENDS UP HERE]
        </div>
    </div>

 <button class="close-button" data-close aria-label="Close reveal" 
 type="button">
        <span aria-hidden="true">&times;</span>
 </button>
   </div>
<div class="video-thumbnail">
  <div class="video-play show-in-overlay">
              <a data-toggle="secondvideo">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 512 512"><path id="Video-Play" d="M96 64l320 192-320 
  192z"></path>
                </svg>
                </a>
  </div>
<div class="media-item-caption">
                    <h1 class="media-item-caption-title">Second 
Title</h1>
  <div class="media-caption-sub"><p>Second Caption</p>
  </div>
</div>
                <img src="Video2thumb.jpeg">
</div><!-- "video-thumbnail" -->


  <div class="full reveal" id="featvideo" data-reveal>
    <div class="responsive-embed widescreen reveal-content">
        <div id="player2">
             [SECOND IFRAME ENDS UP HERE]
        </div>
    </div>

 <button class="close-button" data-close aria-label="Close reveal" 
 type="button">
        <span aria-hidden="true">&times;</span>
 </button>
   </div>



</html>

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

var playerInfoList = [{
id: 'player1',
height: '175',
width: '300',
videoId: 'dOy7vPwEtCw'
}, {
id: 'player2',
height: '175',
width: '300',
videoId: 'QWtsV50_-p4'
}, {
id: 'player3',
height: '175',
width: '300',
videoId: 'y-JqH1M4Ya8'
}, {
id: 'player4',
height: '175',
width: '300',
videoId: 'gH7dMBcg-gE'
}, {
id: 'player5',
height: '175',
width: '300',
videoId: '7wL9NUZRZ4I'
}, {
id: 'player6',
height: '175',
width: '300',
videoId: 'S4R8HTIgHUU'
}];

function onYouTubeIframeAPIReady() {
if (typeof playerInfoList === 'undefined') return;

for (var i = 0; i < playerInfoList.length; i++) {
    var curplayer = createPlayer(playerInfoList[i]);
    players[i] = curplayer;
}
}

var players = new Array();

function createPlayer(playerInfo) {
return new YT.Player(playerInfo.id, {
    height: playerInfo.height,
    width: playerInfo.width,
    videoId: playerInfo.videoId,
});
}

$('.close-button').click(function () {
  $(players).each(function (i) {
    this.stopVideo();
  });
 });
 </script>

Answer 1

好的，在搜索不间断后，我找到了一个非常臃肿但有效的解决方案。我还找到了一种以不会出现故障的方式引用多个Youtube视频的方法。我遇到了上述代码的问题。所以这是我的解决方案，希望它对某人有帮助。第一：引用第二个玩家，第三个玩家等，如下所示：

var player1;
var player2;
  function onYouTubeIframeAPIReady() {
    player1 = new YT.Player('player1', {
      height: '706px',
      width: '1256px',
      videoId: 'sDfQLfjeM',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
            player2 = new YT.Player('player2', {
      height: '706px',
      width: '1256px',
      videoId: 'S4R8HTIgHUU',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

THEN。使用Foundation的Reveal Events将ID的特定显示绑定到事件。在这种情况下，playVideo（）;和stopVideo（）;像这样：

$(document).on('closed.zf.reveal', '#exampleModal8', function () {
player1.stopVideo();
 alert("Close sesame!");
});
$(document).on('open.zf.reveal', '#exampleModal8', function () {
player1.playVideo();
alert("Open sesame!");
});
$(document).on('closed.zf.reveal', '#exampleModal7', function () {
player2.stopVideo();
alert("Colloportus!");
});
$(document).on('open.zf.reveal', '#exampleModal7', function () {
player2.playVideo();
alert("Alohmahora!");
});

魔术就在“open.zf.reveal＆＃39;之后。您可以在其中指定要单击的div以触发显示。这允许您定位显示的单个实例，然后将其专门绑定到单个播放器以在打开时启动视频并在关闭时停止。我希望这有助于某人，即使我看到围绕Bootstrap的大量相关问题。

多个Youtube视频在Modal中使用API并在打开时播放

1 个答案:

多个Youtube视频在Modal中使用API​​并在打开时播放

1 个答案:

多个Youtube视频在Modal中使用API并在打开时播放