另一个播放完后播放下一个youtube src [英] Play next youtube src when the other one is finished

问题描述

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

So basically i got an unlimited number of different types of divs with lists in them and they all include an a tag with a youtube video... When i press on it gets played on a big 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吗? 在此处输入图片描述

So my question is, is it possible for me to be able to play the next song after the first one is finished? Can I do this without having to call the youtube api with javascript/jquery and iframes only? enter image description here

推荐答案

您需要使用 youtube iframe api ，以便能够访问播放器事件并在视频结束时执行代码. 选中此答案以获取更多详细信息.

You need to use the youtube iframe api to be able to access the player events and be able to execute code when a video ends. Check this answer for more details.

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

The rest is just plain js/jquery for keeping track of which video is playing and telling the player to load that video. I created an example of it here: https://codepen.io/ahmed-wagdi/pen/xdWvBL

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

Basically you keep track of the current video using a current_video variable. When a link is clicked you set that variable to the index of the clicked element, when the video ends you just increment it. Just make sure to handle the cases where you're playing the last video, i didnt do that in my example

这篇关于另一个播放完后播放下一个youtube src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！