2

Lo que quiero hacer es que al momento de dar clic en el boton de cerrar de mi modal, este me detenga el video que se esta reproduciendo, por el momento el video se queda sonando de fondo en mi sitio web, actualmente lo estoy intentando de la siguiente forma:

Objeto de youtube

<center>
<object width="420" height="315" data="https://www.youtube.com/embed/XGSy3_Czz8k">
</object>
</center>

Codigo de JS

var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";


var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;




function onYouTubePlayerAPIReady() {
  // create the global player from the specific iframe (#video)
  player = new YT.Player('videoM', {
    events: {
      // call this function when player is ready to use
      'onReady': onPlayerReady
    }
  });
}


function onPlayerReady(event) {
  onYouTubePlayerAPIReady();
  var pauseButton = document.getElementById("cerrarM");
  pauseButton.addEventListener("click", function() {
    player.stopVideo();
  });

}

Codigo de boton close

<button class="close" onclick="cerrar(2);" id="cerrarM">&times;</button>

Por el momento no me realiza ninguna accion, antes me decia que el evento stop no existia en el contexto, pero ya no me dice eso y sigue escuchandose de fondo el video.

2 respuestas 2

1

De esta manera te funciona por ejemplo un iframe :

<iframe id="video" src="https://www.youtube.com/embed/XGSy3_Czz8k?enablejsapi=1&html5=1" allowfullscreen="" frameborder="0" width="420" height="315"></iframe>

Cargamos la función encargada de detener el vídeo y la api para controlarlo :

<script>
// Loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubePlayerAPIReady() {
  player = new YT.Player('video', {
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {

  var stopButton = document.getElementById("stop");
  stopButton.addEventListener("click", function() {
    player.stopVideo();
  });

}

</script>

Por ultimo una ves iniciada la reproducción del vídeo lo detenemos de esta manera:

<a href="#" id="stop">Stop</a> 

Saludes.

1

En tu ejemplo no veo como pasas el video de la API al DOM (id="videoM").

Te dejo un ejemplo funcionando con los eventos: PLAY, PAUSE y STOP:

Ver Demo

<!-- 1. El <iframe> (y el reproductor de video) reemplazarán esta etiqueta <div>. -->
<div id="videoM"></div>
<br>
<button id="play">PLAY</button>
<button id="pause">II</button>
<button id="stop">STOP</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.0.20/jquery.mb.YTPlayer.js"></script>

<script>

    // Este código carga el código IFrame Player API asincrónicamente.
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);    

    // Esta función crea un <iframe> (y reproductor de YouTube)
    // después de las descargas del código del API.
    var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('videoM', {
        height: '360',
        width: '640',
        videoId: 'XGSy3_Czz8k', // <= Pasar ID del Video
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }

    // La API llamará a esta función cuando el reproductor de vídeo esté listo.
    function onPlayerReady(event) {

      var playButton = document.getElementById("play");
      var pauseButton = document.getElementById("pause");
      var stopButton = document.getElementById("stop");

      // Descomentar esto si quieres que salte el video automáticamente
      //event.target.playVideo();

       playButton.addEventListener("click", function() {
          playVideo();
       });

      pauseButton.addEventListener("click", function() {
         pauseVideo();
      });

      stopButton.addEventListener("click", function() {
         stopVideo();
      });
    }

    // La API llama a esta función cuando cambia el estado del reproductor.
    // La función indica que cuando se reproduce un video (estado = 1),

    // var done = false;
    function onPlayerStateChange(event) {
    //  if (event.data == YT.PlayerState.PLAYING && !done) {
    //    setTimeout(stopVideo, 6000);
    //    done = true;
    //  }
    }

    function stopVideo() {
      player.stopVideo();
    }    

    function playVideo() {            
        player.playVideo();
    }

    function pauseVideo() {            
        player.pauseVideo();
    }

</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.