Para reproducir el problema: haga clic en un botón de reproducción y se cargará el video.
Luego haga clic en la X
Ahora haga clic en un botón de reproducción diferente y verá que el video en el que se hizo clic antes ahora se está reproduciendo, junto con el video en el que acabo de hacer clic. Entonces ahora hay 2 videos reproduciéndose al mismo tiempo.
Para probar el código, presione Ejecutar , no actualice: https://jsitor.com/l_crlisuws
¿Qué habría que ajustar en el código para arreglar eso?
¿Cómo se arregla eso en el código?
function createStopHandler(player) { const stopButtons = document.querySelectorAll(".exit"); stopButtons.forEach(function stopButtonHandler(buttons) { buttons.addEventListener("click", function buttonClickHandler() { player.stopVideo(); }); }); } function createPlayHandler(player) { const playButtons = document.querySelectorAll(".thePlay"); playButtons.forEach(function playButtonHandler(buttons) { buttons.addEventListener("click", function buttonClickHandler() { player.playVideo(); }); }); } function onPlayerReady(event) { const player = event.target; player.setVolume(100); createStopHandler(player); createPlayHandler(player); }Debe obtener a todos los jugadores y verificar si alguno de ellos ya está jugando y luego detenerlos.
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(); } } }Aquí está el enlace para js fiddle Fiddle
Los controladores de botón de parada se crean y agregan en
function createStopHandler(player) { const stopButtons = document.querySelectorAll(".exit"); stopButtons.forEach(function stopButtonHandler(buttons) { buttons.addEventListener("click", function buttonClickHandler() { player.stopVideo(); }); }); } Suponiendo que se llame a createStopHandle para cada uno de los tres reproductores, cada botón de exit tendrá tres controladores de clic, donde cada controlador detiene un video. Al hacer clic en un botón de salida, se intentará detener algunos videos que no se están reproduciendo, pero esto no debería tener efectos secundarios no deseados.
Los controladores del botón de reproducción se crean y agregan en
function createPlayHandler(player) { const playButtons = document.querySelectorAll(".thePlay"); playButtons.forEach(function playButtonHandler(buttons) { buttons.addEventListener("click", function buttonClickHandler() { player.playVideo(); }); }); } Ahora hay tres botones de clase thePlay , por lo que el bucle forEach agrega un controlador a cada botón para reproducir el reproductor proporcionado en el argumento. Por lo tanto, hacer clic en un botón de reproducción puede iniciar varios videos, pero solo debe iniciar uno.
La solución es agregar solo un oyente a un botón de reproducción para reproducir el video, que dejaré que usted diseñe el funcionamiento del mismo: el botón necesita un medio para identificar el reproductor al que pertenece, pero (casi) no se ha configurado nada arriba para ese propósito.
Nota: la adición de detectores de eventos parece ocurrir cuando se hace clic en un botón de reproducción y puede permitir (¿está?) Permitir que el mismo detector de eventos se agregue varias veces. Después de corregir los controladores para que cada botón solo inicie un video, asegúrese de que el botón solo tenga un controlador para reproducir su video, en lugar de múltiples controladores de eventos para iniciar el mismo video.
Editar: TLDR;
Hacer clic en un botón de inicio lo maneja coverClickHandler , que llama a createPlayer , que llama a videoPlayer.addPlayer , que crea un nuevo reproductor YT, que cuando está listo llama a onPlayerReady , que llama a createStopHandler y createPlayHandler .
Por lo tanto, cada clic de inicio crea un nuevo reproductor, sin eliminar los reproductores anteriores del mismo video, sin eliminar los controladores de eventos que ya no tienen sentido llamar y sin seleccionar el reproductor correcto para comenzar cuando se hace clic en un botón de inicio.
Esto necesita rediseño. ¡Te deseo lo mejor con las reparaciones!