Eu tenho o seguinte código
<div class="col-lg-12" style="padding:40px 10px 40px 10px;">
<div class="col-lg-1" style="padding-right:0;margin-top:20px;">
<i class="fa fa-chevron-left fa-4x"></i>
</div>
<div class="col-lg-10" style="overflow:hidden;padding:0;">
<div class="col-lg-2 list_altos selected_vid" data-id="1" data-id-iframe="ftWI2X_ORDI">
<img src="http://img.youtube.com/vi/ftWI2X_ORDI/0.jpg" style="width:100%;">
</div>
<div class="col-lg-2 list_altos" data-id="2" data-id-iframe="m5JuhUOVIm8">
<img src="http://img.youtube.com/vi/m5JuhUOVIm8/0.jpg" style="width:100%;">
</div>
<div class="col-lg-2 list_altos" data-id="3" data-id-iframe="HWeK1t9XsXk">
<img src="http://img.youtube.com/vi/HWeK1t9XsXk/0.jpg" style="width:100%;">
</div>
<div class="col-lg-2 list_altos" data-id="4" data-id-iframe="hzvxahpw1lM">
<img src="http://img.youtube.com/vi/hzvxahpw1lM/0.jpg" style="width:100%;">
</div>
<div class="col-lg-2 list_altos" data-id="5" data-id-iframe="4aUvwR87jLM">
<img src="http://img.youtube.com/vi/4aUvwR87jLM/0.jpg" style="width:100%;">
</div>
<div class="col-lg-2 list_altos" data-id="6" data-id-iframe="C3oRqoBEOJY">
<img src="http://img.youtube.com/vi/C3oRqoBEOJY/0.jpg" style="width:100%;">
</div>
</div>
<div class="col-lg-1 text-right" style="padding-left:0;margin-top:20px;">
<i class="fa fa-chevron-right fa-4x"></i>
</div>
</div>
Aqui tenho uma lista de imagens que são videos que ao clicar, ele troca o src
dos vídeos por aqueles que tem no data-id-iframe
.
Também estou a usar o YouTube Player API Reference for iframe Embeds
que necessito para quando o vídeo acabar, ele mudar para o próximo da lista.
O problema é que ele funciona apenas na transferência do primeiro vídeo para o segundo, depois não volta a dar.
Eis o script
utilizado.
No código abaixo é o código que uso para a muda do src
do iframe
.
function muda_video(next, iframe){
if(next == 0 || iframe == 0){
next=2;
iframe = $("div[data-id='2']").attr("data-id-iframe");
}else{
next=next+1;
}
$("#player_vid").attr("src", "https://www.youtube.com/embed/"+iframe+"?enablejsapi=1&autoplay=1")
$(".selected_vid").removeClass("selected_vid");
$("div[data-id='"+next+"']").addClass("selected_vid");
}
No código abaixo é executado quando um elemento da lista é clicado
e então ele troca o src
do iframe e executa o vídeo.
$(".list_altos").click(function(){
var this_id=$(this).attr("data-id");
var iframe = $(this).attr("data-id-iframe");
muda_video(this_id, iframe);
$(".selected_vid").removeClass("selected_vid");
$(this).addClass("selected_vid");
});
E no código asseguir, mostro como está estruturada a função do Youtube API
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 player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player_vid', {
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if(event.data === 0) {
muda_video(0, 0);
}
}