La vidéo YouTube (injectée) met fin au rappel

J'injecte YouTube de l'iframe d'un div dans le document de prêt et de le lier à cliquer sur:

jQuery(document).ready(function($) {
    jQuery('.video-thumb').click(function(){
        ...
        $('#player').html('<iframe width="761" height="421" src="http://www.youtube.com/embed/' + $(this).attr('videoid') + '?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>');
        ...
    }
 }

Et je veux faire un rappel lorsque la vidéo se termine. J'ai lu sur onYouTubePlayerAPIReadymais il doit être mis à l'extérieur du document de prêt.

J'ai essayé de charger le lecteur vidéo par cette construction à l'extérieur de document prêt:

var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '421',
      width: '761',
      videoId: '',
      playerVars: { autoplay: 1, autohide: 1, showinfo: 0 },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}

mais j'ai quelques questions:

  • showinfo:0 ne fonctionne pas, encore d'autres miniatures de vidéo à la fin
  • Je ne sais pas comment changer les id des vidéos (et reinit la vidéo?)
  • plus des erreurs de script que la première méthode (injection iframe)

Je préfère utiliser la première méthode, mais comment faire pour créer la vidéo se termine de rappel? Merci.

source d'informationauteur Jeaf Gilbert

  1. 28

    Un exemple de code ci-dessous est également sur jsfiddle.net.

    Quelques remarques:

    • Utilise le iframe_apipas la javascript_api
    • YT.Joueur constructeur est minime parce que vous êtes la construction de l'iframe vous-même.
    • La "playerVars" sont inclus comme iframe paramètres d'URL.
    • Le paramètre "enablejsapi=1" est réglé.

    Exemple De Balisage

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

<a style="display: block;" class="video-thumb" id="HuGbuEv_3AU" href="#">
    Megadeth: Back In The Day
</a>  
<a style="display: block;" class="video-thumb" id="jac80JB04NQ" href="#">
    Judas Priest: Metal Gods
</a> 
<a style="display: block;" class="video-thumb" id="_r0n9Dv6XnY" href="#">
    Baltimora: Tarzan Boy
</a>   

<div id="container"></div>
<div id="log">--Logging enabled--</div>

    Le JavaScript

    function log(msg) {
    jQuery('#log').prepend(msg + '<br/>');
}

function onPlayerStateChange(event) {
    switch(event.data) {
        case YT.PlayerState.ENDED:
            log('Video has ended.');
            break;
        case YT.PlayerState.PLAYING:
            log('Video is playing.');
            break;
        case YT.PlayerState.PAUSED:
            log('Video is paused.');
            break;
        case YT.PlayerState.BUFFERING:
            log('Video is buffering.');
            break;
        case YT.PlayerState.CUED:
            log('Video is cued.');
            break;
        default:
            log('Unrecognized state.');
            break;
    }
}

jQuery(document).ready(function($) {
    $('.video-thumb').click(function() {

        var vidId = $(this).attr('id');
        $('#container').html('<iframe id="player_'+vidId+
            '" width="420" height="315" src="http://www.youtube.com/embed/'+
            vidId+'?enablejsapi=1&autoplay=1&autohide=1&showinfo=0" '+
            'frameborder="0" allowfullscreen></iframe>');

        new YT.Player('player_'+vidId, {
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    });
});