Como detectar quando um vídeo do youtube termina de ser reproduzido?

Estou trabalhando em um site que tem uma tonelada de vídeos do youtube embutidos, o cliente quer mostrar um pop-up sempre que um vídeo para de ser exibido.

Eu olhei para a API do YouTube e parece haver uma maneira de detectar quando um vídeo termina:

http://code.google.com/apis/youtube/js_api_reference.html

mas não posso incorporar os vídeos como eles mencionaram naquela página, pois os vídeos já estão todos no site (milhares que foram adicionados manualmente colando o código de incorporação).

Existe uma maneira de detectar o final desses vídeos sem alterar nenhum dos vídeos existentes (usando javascript)?

— TK123
fonte

A única coisa que eu poderia sugerir é alterar programaticamente as entradas incorporadas a serem incluídas enablejsapi=1. Se eles estiverem em um banco de dados, deve ser bastante fácil alterar o srcatributo. Você pode precisar de algum regex se eles forem inseridos estaticamente em arquivos HTML.

— baixe

Respostas:

174

Isso pode ser feito por meio da API do player do youtube:

http://jsfiddle.net/7Gznb/

Exemplo de trabalho:

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

    <script src="http://www.youtube.com/player_api"></script>

    <script>

        // create youtube player
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
              width: '640',
              height: '390',
              videoId: '0Bmhjf0rKe8',
              events: {
                onReady: onPlayerReady,
                onStateChange: onPlayerStateChange
              }
            });
        }

        // autoplay video
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // when video ends
        function onPlayerStateChange(event) {        
            if(event.data === 0) {          
                alert('done');
            }
        }

    </script>

— TK123
fonte

Como você integrou isso a vários vídeos em uma página?

— motoxer4533

@ motoxer4533 bem, não tive que lidar com vários vídeos na mesma página, mas apenas um por página. Não tenho certeza se a API permite que vários players sejam criados e seus endpoints individuais detectados.

— TK123

não deve ser difícil de configurar para vários jogadores - basta configurar vários var player1, var player2, var player 3 etc, em seguida, execute o código de configuração várias vezes - com cada novo var

— codeguy

Também é um exemplo completo de como fazer algo semelhante usando iframe api aqui developers.google.com/youtube/…

— JeremyWeir

Para facilitar a leitura, aconselho YT.PlayerState.ENDED ao verificar o estado.

— Bart Burg

-6

O que você pode querer fazer é incluir um script em todas as páginas que faça o seguinte ... 1. encontre o youtube-iframe: pesquise por largura e altura por título ou encontre www.youtube.com em sua fonte. Você pode fazer isso ... - percorrendo o window.frames por um loop for-in e, em seguida, filtrar pelas propriedades

injetar jscript no iframe da página atual adicionando a função onYoutubePlayerReady must-include-function http://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspx
Adicione os ouvintes do evento etc.

Espero que isto ajude

— Yshouman
fonte

não tenho certeza se isso é possível devido às regras de vários domínios

— Asher Garland