Detectar cuando el video de YouTube deja de reproducirse – Método global

Question 1

Estoy usando WordPress y ya tengo muchas publicaciones con videos de Youtube incrustados. ¿Cómo detecto cuando un video ha dejado de reproducirse, sin volver a escribir todas mis publicaciones?

Sé que podrías usar la API del reproductor de Youtube (abajo)

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

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

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

pero en todas mis publicaciones tengo los videos incrustados así:

<iframe width="640" height="390" frameborder="0" type="text/html" src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>

Esto es lo que he hecho hasta ahora. -(Enlace)

onYouTubePlayerReady();

function onYouTubePlayerReady() {
  //ytplayer = document.getElementById(playerId);
    ytplayer = $('iframe[src^="http://youtube.com/embed/"]');
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
   if(newState==YT.PlayerState.ENDED){
        alert('stop');
   }
}

No quiero revisar todas mis publicaciones y editarlas una por una. ¿Hay alguna manera de que pueda hacer un gancho global en todos mis videos incrustados?

Question 2

Hasta donde yo sé, no puede usar la API de Youtube para detectar cambios en el reproductor cuando ya incrustó el video con un iframe.

Entonces, una solución es usar jQuery para encontrar el iframe, obtener la identificación del video del atributo src, eliminar el iframe y luego dejar que la API de Youtube incruste el video nuevamente en el mismo lugar. He reescrito tu código y eso debería ayudarte a empezar. Es posible que pueda insertar el código en algún tipo de plantilla global para que funcione en cada elemento del blog.

(No pude hacer que esto funcionara en FiddleJS, pero funciona bien guardando el código como un archivo local).

    <html>
    <body>
    <iframe width="640" height="390" frameborder="0" type="text/html" src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>


    <script type="text/javascript">

    function getVideoID(){
        var videoIframe =  $('iframe');
        var videoURL = videoIframe.attr('src');
        var id = videoURL.split("https://stackoverflow.com/")[4].split("?")[0];
        videoIframe.after('<div id="player"></div>');
        videoIframe.remove();
        return (id);
    }

    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() {
       var videoID = getVideoID();
       player = new YT.Player('player', {
       height: '195',
       width: '320',
       videoId: videoID,
       events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
           }
        });

          function onPlayerReady(event) {
              event.target.playVideo();
          }

          function onPlayerStateChange(event) {
           var state = event.target.getPlayerState();
            if (state === 2) {
                alert("Paused");
            }
             else if (state === 0) {
                alert("Ended");
             }
            }
          }
    </script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">"></script>
    <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>


    </body>
    </html>

¿Ha sido útil esta solución?