0

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);
    }
  }

1 Resposta 1

0

O vídeo só executa o segundo, pois você está utilizando o código:

$("div[data-id='2']").attr("data-id-iframe");

Esse código só irá capturar o elemento data-id="2" e nunca os outros. O que você precisa fazer é verificar o elemento selecionado e capturar o próximo, por exemplo:

VanillaJS

<!DOCTYPE hml>
<html>
    <head>
        <title>Title of the document</title>
        <style>
            li { cursor:pointer; transition: margin-left .3s }
            li:hover { margin-left: 10px; }
            li.selected { font-weight:bold }

            @keyframes blink {
                25%  {opacity:0}
                50%  {opacity:1}
                75%  {opacity:0}
                100% {opacity:1}
            }
        </style>
    </head>

    <body>
        <div id="player"></div>

        <ol id="playlist">
            <li data-id-iframe="lB8ZsjMhy5M">AMY LEE - Speak To Me</li>
            <li data-id-iframe="dNoTvg0t52c">EPICA - Storm The Sorrow (OFFICIAL VIDEO)</li>
            <li data-id-iframe="Dys1_TuUmI4">Epica - Cry For The Moon</li>
            <li data-id-iframe="Rx9OoLwiAho">XANDRIA - Valentine</li>
            <li data-id-iframe="gGTAmmTiD_Y">XANDRIA - Nightfall</li>
            <li data-id-iframe="bpcNQZrhhKg">Nightwish - The Phantom Of The Opera</li>
        </ol>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://www.youtube.com/iframe_api"></script>
        <script>
            /* Captura todos os elementos que contém o ID da música */
            const musics = document.querySelectorAll("[data-id-iframe]")

            let player;

            /**
             * Função de callback para quando o objeto
             * YT.Player for carregado
             */
            function onYouTubeIframeAPIReady() {

                /* Instancia o Player */
                player = new YT.Player('player', {
                    height: '360',
                    width: '640',
                    events: {
                        /**
                         * Adiciona um callback para ser executado 
                         * toda vez que o player sofrer uma alteração como:
                         *  - não iniciado
                         *  - encerrado
                         *  - em reprodução
                         *  - em pausa
                         *  - armazenando em buffer
                         *  - vídeo indicado
                         */
                        onStateChange: event => {

                            /* Verifica se o vídeo terminou a execução */
                            if (event.data == YT.PlayerState.ENDED) {

                                /* Captura a posição da música selecionada */
                                let index = [...musics].indexOf(document.querySelector("#playlist li.selected"));

                                /* Musica de música */
                                changeMusic( musics[index+1] )
                            }
                        }
                    }
                })
            }

            /* Adiciona evento de clique na playlist */
            musics.forEach( music => {
                music.addEventListener('click', changeMusic)
            })

            /*
             * Função para alteração da música
             * @param music MouseEvent|HTMLLiElement
             */
            function changeMusic(music) {

                /**
                 * Caso a variável music seja um MouseEvent,
                 * captura o valor de music.target. Caso contrário,
                 * captura o elemento passado pela variável
                 */
                music = music.target || music;

                /* Captura o ID do vídeo */
                player.loadVideoById( music.getAttribute("data-id-iframe") )

                /* Desmarca o vídeo selecionado */
                musics.forEach( el => el.classList.remove("selected") );

                /* Seleciona o vídeo atual */
                music.classList.add("selected")
            }
        </script>
    </body>
</html>

jQuery

<!-- -------------------------- -->
<!-- A mesma estrutura anterior -->
<!-- -------------------------- -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
    /* Captura todos os elementos que contém o ID da música */
    const musics = $("[data-id-iframe]")

    let player;

    /**
     * Função de callback para quando o objeto
     * YT.Player for carregado
     */
    function onYouTubeIframeAPIReady() {

        /* Instancia o Player */
        player = new YT.Player('player', {
            height: '360',
            width: '640',
            events: {
                /**
                 * Adiciona um callback para ser executado 
                 * toda vez que o player sofrer uma alteração como:
                 *  - não iniciado
                 *  - encerrado
                 *  - em reprodução
                 *  - em pausa
                 *  - armazenando em buffer
                 *  - vídeo indicado
                 */
                onStateChange: event => {

                    /* Verifica se o vídeo terminou a execução */
                    if (event.data == YT.PlayerState.ENDED) {

                        /* Seleciona a próxima música */
                        changeMusic( $("#playlist li.selected").next() )
                    }
                }
            }
        })
    }

    /* Adiciona evento de clique na playlist */
    $(musics).click(function() {
        changeMusic($(this))
    })

    /*
     * Função para alteração da música
     * @param music MouseEvent|HTMLLiElement
     */
    function changeMusic(music) {

        /* Captura o ID do vídeo */
        player.loadVideoById( $(music).attr("data-id-iframe") )

        /* Desmarca o vídeo selecionado */
        $(musics).removeClass("selected");

        /* Seleciona o vídeo atual */
        $(music).addClass("selected");
    }
</script>

O problema é que você tem que ficar se preocupando com algumas coisas, mas, para nossa alegria, há o método loadPlaylist, com esse método só precisamos passar um array com os IDs necessários e a própria API do YouTube irá gerencia isso para nós, por exemplo:

jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
    /* Captura todos os elementos que contém o ID da música */
    const musics = $("[data-id-iframe]")

    let player;

    /**
     * Função de callback para quando o objeto
     * YT.Player for carregado
     */
    function onYouTubeIframeAPIReady() {

        /* Instancia o Player */
        player = new YT.Player('player', {
            height: '360',
            width: '640',
            events: {
                onReady: function() {
                    let playlist = new Array();

                    $(musics).each(function() {
                        playlist.push( $(this).attr("data-id-iframe") );
                    })

                    player.loadPlaylist( playlist )
                },
                onStateChange: function(result) {
                    if (result.data == YT.PlayerState.PLAYING) {
                        $(musics).removeClass("selected")
                        $("[data-id-iframe=\""+player.getVideoData().video_id+"\"]").addClass("selected");
                    }
                }
            }
        })
    }

    /* Adiciona evento de clique na playlist */
    $(musics).click(function() {
        player.loadVideoById( $(this).attr('data-id-iframe') )
    })
</script>
3
  • Eu usei aquilo caso as variáveis iframe e next retornassem 0, que é o que retorna da primeira vez, na função do primeiro vídeo. Commented 6/03/2018 às 16:16
  • Quando o vídeo termina, você chama muda_video(0, 0);. Esses valores nunca mudam, exceto se você clicar no vídeo. Commented 6/03/2018 às 21:27
  • A usa resposta está corretissima! O que me ajudou imegnso foi o loadVideoById, não tinha conhecimento! Commented 7/03/2018 às 16:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .