web-dev-qa-db-fra.com

Suspension de l'API iFrame de YouTube en JavaScript

J'ai une vidéo Youtube intégrée dans un diaporama que je voudrais suspendre lorsque l'utilisateur clique sur une miniature img:

<li><iframe width="430" height="241" src="http://www.youtube.com/watch?v=XjUz8IT0CYg?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="my-video"></iframe></li>

Je suis passé par-dessus l'API Youtube mais je ne comprends pas comment commencer.

L'API JS se charge-t-elle automatiquement lorsque j'ajoute ?enablejsapi à la fin de YouTube video id?

Voici mon JS:

var player1 = document.getElementById('my-video');

$('img').click(function () {
  player1.pauseVideo();
})

MODIFIER:

Voici ce que j'ai fait sur la base de la réponse de Matt ci-dessous, pour ceux qui se demandent:

<li><iframe width="430" height="241" src="http://www.youtube.com/embed/XjUz8IT0CYg?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="player-1"></iframe></li>

<li><iframe width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="player-2"></iframe></li>

Et puis mon JS:

var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Create YouTube player(s) after the API code downloads.
var player1;
var player2;

function onYouTubeIframeAPIReady() {
    player1 = new YT.Player('player-1');
    player2 = new YT.Player('player-2');
}

Puis dans document.ready:

$(document).ready(function () {
    $(".slideshow-1 img").click(function () {
        player1.stopVideo();
    });

    $(".slideshow-2 img").click(function () {
        player2.stopVideo();
    });
}
javascriptjqueryyoutubeyoutube-api
13
Yahreen

L'ajout de ?enablejsapi dans la chaîne incorporée n'inclut pas automatiquement le code de l'API. Il enregistre uniquement cette intégration particulière avec l'API.

Vous voulez lire le premier exemple ici: https://developers.google.com/youtube/iframe_api_reference

  1. L'extrait de code asynchrone télécharge et exécute l'API YT iframe.
  2. onYouTubeIframeAPIReady() est déclenché lorsque l'API est prête
  3. Créer un nouvel objet YT.Player
  4. Votre code peut maintenant appeler pauseVideo() sur votre objet player

Vous voudrez probablement désactiver tous les événements sur votre img jusqu'à ce que onYouTubeIframeAPIReady() soit déclenché.

13
Matt Stone

Si vous souhaitez conserver votre JS dans un fichier externe, utilisez:

HTML

<iframe id="player1" class="ytplayer" width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen></iframe>
<iframe id="player2" class="ytplayer" width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen></iframe>

JS

var yt_int, yt_players={},
    initYT = function() {
        $(".ytplayer").each(function() {
            yt_players[this.id] = new YT.Player(this.id);
        });
    };
$.getScript("//www.youtube.com/player_api", function() {
    yt_int = setInterval(function(){
        if(typeof YT === "object"){
            initYT();
            clearInterval(yt_int);
        }
    },500);
});

Vidéo de contrôle 

yt_players['player_id'].playVideo();

La raison pour laquelle je le fais de cette façon est que les vidéos se chargent dynamiquement via le CMS et qu'elles s'ouvrent dans une superposition. Je règle les fonctions de superposition Fermer/Ouvrir pour lire/mettre en pause la vidéo.

19
Roi

J'ai une autre solution:

<iframe id="player1" class="ytplayer" width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen></iframe>
<iframe id="player2" class="ytplayer" width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen></iframe>

et 

$('.ytplayer').each(function(){
    //this.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
    this.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*')
});
1
Rijo K P