Api Youtube - arrêt de la vidéo

J'ai besoin d'aide avec l'API Youtube et embeded vidéos.
Je veux arrêter la vidéo lors d'un clic sur un élément (div,lien,td, etc.). Je suis en train de le faire fonctionner juste pour 1 vidéo maintenant, mais la dernière fonction de ce script doit être d'arrêter toutes les vidéos chargées sur la page en cours. J'ai lu à travers le YT documentation de l'API mais je suis vraiment débutant en JS, donc c'est toujours assez dur à comprendre pour moi.

<html>
<head>
    <script type="text/javascript" src="swfobject.js"></script>
</head>
<body>

<a href="javascript:ytplayer.stopVideo()">Play</a>
<br/>
<iframe id="ytplayer" src="http://www.youtube.com/embed/8Ax-dAR3ABs?rel=0&iv_load_policy=3&showinfo=0&enablejsapi=1&version=3&playerapiid=ytplayer" type="application/x-shockwave-flash" frameborder="0" allowscriptaccess="always"></iframe>

</body>
</html>

merci d'avance pour tous les conseils

Utilisation callPlayer("ytplayer", "stopVideo"); à l'aide de la petite fonction à partir de Youtube iframe API: comment puis-je contrôler une iframe joueur qui est déjà dans le code HTML?.
Vous pouvez essayer d'utiliser un événement comme ceci: $("#ytplayer")[0].contentWindow.postMessage('{"événement":"commande","func":"stopVideo","args":""}', '*');

OriginalL'auteur Madr | 2011-07-12

  1. 13

    Vous ne pouvez pas contrôler si vous incorporez avec une iframe. Vous devez utiliser l'objet de l'incorporation, comme ceci:

    <object id="ytplayer" style="height: 390px; width: 640px">
    <param name="movie" value="http://www.youtube.com/v/8Ax-dAR3ABs?version=3&enablejsapi=1">
    <param name="allowScriptAccess" value="always">
    <embed id="ytplayer" src="http://www.youtube.com/v/8Ax-dAR3ABs?version=3&enablejsapi=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390">
</object>

    Le reste de votre code doit généralement après que, même si elle peut avoir besoin d'être mis à jour-à-dire:

    <a href="javascript:document.getElementById('ytplayer').stopVideo()">Play</a>

    Aussi, avez-vous vu le site de démo? http://code.google.com/apis/youtube/youtube_player_demo.html

    merci pour les réponses rapides, mais cela ne fonctionne toujours pas pour moi. J'ai essayé d'autres swfobjects, objet d'inclusion, de modifier le code et de l'ofc j'ai vu le site de démo, mais je ne suis pas en mesure de savoir comment ils ont fait play/pause/stop boutons, pas même à partir de leur code html/js codes. Je pense que mon problème est plus susceptible anodin (comme d'habitude), je vais peut-être essayer de lire la documentation de nouveau et de le résoudre.
    J'ai vu votre swfobject lien. Pourquoi ne pas poster un jsfiddle avec ce que vous avez et nous pouvons hachage?
    Vous pouvez contrôler effectivement intégré vidéo YouTube à l'intérieur de l'iframe maintenant: apiblog.youtube.com/2011/01/...
    Il y a un réel de l'API Javascript, en disant: vous devez utiliser l'objet flash n'est pas vrai. (et il était disponible avant cette réponse a été donnée trop)
    Watch out pour les id en double dans cette réponse, c'est une mauvaise HTML. Vous exécutez les commandes de l'API sur la <embed> objet et non pas sur <object>, de sorte que le code doit être sur intégrer.

    OriginalL'auteur Jordan

  2. 6

    J'ai récemment écrit un peu de jquery pour cela, à partir de l'api youtube

    Je voulais arrêter toutes les vidéos de jouer avec une seule action

    <html>
<head>
<!-- jquery -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
  <body>
    <!-- player divs -->
    <div id="player1"></div>
    <div id="player2"></div>
    <div id="player3"></div>

    <a class="stop">Stop</a>

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

      //make player array
      var players = new Array();

      function onYouTubeIframeAPIReady() {
        players[0] = new YT.Player('player1', {
          height: '390',
          width: '640',
          videoId: 'u1zgFlCw8Aw'
        });
        players[1] = new YT.Player('player2', {
          height: '390',
          width: '640',
          videoId: 'u1zgFlCw8Aw'
        });
        players[2] = new YT.Player('player3', {
          height: '390',
          width: '640',
          videoId: 'u1zgFlCw8Aw'
        });
      }

      $('.stop').click( function() {
        //loop players array to stop them all
        $(players).each(function(i){
           this.stopVideo();
          });
      });


    </script>
  </body>
</html>

    ou pour arrêter une seule vidéo:

    $('.stop').click( function() {
   playerVariableName.stopVideo();
});
    merci pour l'exemple de code - ce code ne fonctionne pas si bien sur Chrome, mais fonctionne très bien sur Safari. Je l'utilise en conjonction avec Jquery UI tabs sur cette page andrewwelch.info/filming-craftspeople-makers.php

    OriginalL'auteur frisseprins

  3. 0

    Pas familier avec l'api youtube, mais cela devrait fonctionner en supposant que votre code est correct:

    <script type="text/javascript">
    player = document.getElementById('ytplayer');

    function stop(){
        player.stopVideo();
        return false;
    }
</script>

<a href="#" onclick="stop()">Play</a>

    Insérez-le dans le lieu de votre <a href="javascript:ytplayer.stopVideo()">Play</a> tag.

    OriginalL'auteur Eric Yang