另一个完成后播放下一个 youtube src

Question

所以基本上我得到了无限数量的不同类型的 div，其中包含列表，它们都包含一个带有 youtube 视频的标签...当我按下它时，它会在一个大 iframe 上播放...

<div class="the box">
<ul class="first">
<li class="second">Taylor Swift - Shake It Off</li>
<li class="third">
<a href="//www.youtube.com/embed/nfWlot6h_JM?autoplay=1" target="iframeu"><img src="bilder/play.png" alt="play" id="knapp6" width="40" height="40"></a>
</li>
</ul>
</div>
<div class="the box">
<ul class="first">
<li class="second">PSY - GANGNAM STYLE(강남스타일) M/V</li>
<li class="third">
<a href="//www.youtube.com/embed/9bZkp7q19f0?autoplay=1" target="iframeu">
<img src="bilder/play.png" alt="play" id="knapp6" width="40" height="40"></a></li>
</ul>
</div>

	<div id ="player"> 
	 <iframe  height = "195" width = "320" frameborder = "0" autoplay 
		 src="//www.youtube.com/embed/msSc7Mv0QHY" name= "iframeu" id = "mainFrame" > </iframe>
	</div>

所以我的问题是，我可以在第一首歌曲完成后播放下一首歌曲吗？我可以这样做而无需仅使用 javascript/jquery 和 iframe 调用 youtube api 吗？ enter image description here

Answer 1

您需要使用youtube iframe api 才能访问播放器事件并能够在视频结束时执行代码。 Check this answer了解更多详情。

剩下的只是简单的 js/jquery，用于跟踪正在播放的视频并告诉播放器加载该视频。我在这里创建了一个示例：https://codepen.io/ahmed-wagdi/pen/xdWvBL

基本上，您使用current_video 变量来跟踪当前视频。单击链接时，您将该变量设置为单击元素的索引，当视频结束时，您只需递增它。只要确保处理您正在播放最后一个视频的情况，我在我的示例中没有这样做