arrêter toutes les vidéos quand une nouvelle vidéo est joué

J'ai besoin d'aide avec l'API Youtube et embeded vidéos. Je veux arrêter tous les iframe vidéos (ici j'ai pris seulement 3, mais il y a plusieurs vidéos)en cours d'exécution sur la page en cours quand une nouvelle vidéo de youtube est cliqué. À un moment donné du temps, un seul iframe vidéo youtube doit s'exécuter. Je suis allé thruogh la documentation [https://developers.google.com/youtube/js_api_reference][1] et a pu écrire jusqu'ici...

Mise à jour:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://www.youtube.com/player_api"></script>
        <script type="text/javascript">
            var player;
             function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                });
            }

            var done = false;
              function onPlayerStateChange(event) {
                if (event.data == YT.PlayerState.PLAYING && !done) {
                    alert("hi5");
                    player1.stopVideo();
                    player2.stopVideo();
                    done = true;
                }
               }
        </script>
    </head>
    <body>
        <div>TODO write content</div>
        <ul class="image-grid" id="list"> 
            <li>
                <iframe id="player" width="385" height="230" src="http://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe> 
            </li>
            <li>
                <iframe id="player1" width="385" height="230" src="http://www.youtube.com/embed/wSrA5iQGlDc?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe>
            </li>
            <li>
                <iframe id="player2" width="385" height="230" src="http://www.youtube.com/embed/c7b_WLkztXc?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe>
            </li>
        </ul>
    </body>
</html>

Mis à JOUR

onStateChange événement n'est pas déclenché(de travail)
Dans cet exemple, j'ai 3 vidéos, en réalité, il a plus de vidéos au lieu d'écrire onPlayerStateChange pour chaque vidéo..est-il possible d'utiliser un tableau pour voir toutes les vidéos..et dans la fonction onPlayerStateChange, à écrire joueur[].stopVideo() et ce.playvideo()..quelque chose de ce genre..(besoin d'aide)
veuillez voir ce violon http://jsfiddle.net/LakshmiV/kn5Sf/
S'il vous plaît aider.

OriginalL'auteur satya | 2013-02-15

9

Vous pouvez faire quelque chose comme ça...

Donner à chaque iframe une classe de sorte qu'il peut être identifié comme un iframe pour lecteur youtube.
Ici, j'ai donné "yt_players"

Maintenant, vous pouvez utiliser le code ci-dessous...
```
<script type="text/javascript">
    players = new Array();

    function onYouTubeIframeAPIReady() {
        var temp = $("iframe.yt_players");
        for (var i = 0; i < temp.length; i++) {
            var t = new YT.Player($(temp[i]).attr('id'), {
                events: {
                    'onStateChange': onPlayerStateChange
                }
            });
            players.push(t);
        }
    }
    onYouTubeIframeAPIReady();

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
            var temp = event.target.a.src;
            var tempPlayers = $("iframe.yt_players");
            for (var i = 0; i < players.length; i++) {
                if (players[i].a.src != temp) 
                    players[i].stopVideo();
            }
        }
    }
</script>
```
Ont mis à jour le code...Cela devrait vous aider.

Voir ici...http://jsfiddle.net/anubhavranjan/Y8P7y/

ce que vous pouvez faire est de débogage les données dans le paramètre d'événement et de vérifier si vous pouvez voir que le joueur est en train d'être joué. En fonction de ce que vous pouvez essayer de passer les vidéos et sur.
avait manqué à l'appel pour onYouTubeIframeAPIReady(). Vérifier maintenant
pouvez vous s'il vous plaît vérifier le lien jsfiddle.net/anubhavranjan/Y8P7y
Hey c'est...vous avez besoin d'attendre et de voir quand la vidéo commence...Si vous voulez, vous pouvez même vérifier pour l'événement YT.PlayerState.Mise en mémoire TAMPON et de mettre d'autres vidéos d'arrêter. Et oui, vous pouvez stocker l'objet dans un tableau et d'obtenir l'id de l'iframe et arrêter la vidéo en conséquence
Regardez le code maintenant...il devrait vous aider...Également mis à jour le lien jsfiddle.net/anubhavranjan/Y8P7y j'espère que ça aide

OriginalL'auteur Anubhav Ranjan
3

Grande réponse par Coby à une question similaire à https://stackoverflow.com/a/13260520/835822

À l'aide de un sélecteur d'attribut vous pouvez cibler n'importe quel iframe qui vient de Youtube et ensuite à l'aide de jQuery chaque vous pouvez faire une boucle par tous les d'entre eux.
```
$(function(){
  $('iframe[src*="http://www.youtube.com/embed/"]').each(function(i) {
  this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
});
```
});

Excellente solution. J'ai utilisé 'iframe[src*="//www.youtube.com/embed/"]' de sorte que http ou https à la fois travailler.

OriginalL'auteur grmdgs

Bon concept, mais de l'événement.cible.un.src ne fonctionne pas! Changé pour l'événement.cible.getVideoUrl() et il fonctionne très bien. check it out ici

function onPlayerStateChange(event) {

if (event.data == YT.PlayerState.PLAYING) {
    var temp = event.target.getVideoUrl();
    var tempPlayers = $("iframe.yt_players");
    for (var i = 0; i < players.length; i++) {
        if (players[i].getVideoUrl() != temp) players[i].stopVideo();

    }
}

}

http://jsfiddle.net/Y8P7y/82/

OriginalL'auteur Venki

Vous devez vous connecter pour publier un commentaire.