Actualmente, el mismo video solo puede reproducirse automáticamente 1 vez.
Para reproducir: haga clic en el botón de reproducción de 1 svg, luego haga clic en la X .
Luego haga clic en el mismo botón de reproducción de svg por segunda vez.
Descubrirá que el video no se reproduce automáticamente.
¿Cómo se corrige eso en el código para que el mismo video pueda reproducirse automáticamente una segunda vez?
Estaría usando autoplay o player.playVideo(); para que el video se reproduzca por segunda vez.
No estoy seguro de cómo funcionaría.
https://jsfiddle.net/2h7dgfe5/
const videoPlayer = (function makeVideoPlayer() { const players = []; const tag = document.createElement("script"); tag.src = "https://www.youtube.com/player_api"; const firstScriptTag = document.getElementsByTagName("script")[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); function createStopHandler(player) { const stopButtons = document.querySelectorAll(".exit"); stopButtons.forEach(function stopButtonHandler(buttons) { buttons.addEventListener("click", function buttonClickHandler() { player.stopVideo(); }); }); } function onPlayerReady(event) { const player = event.target; player.setVolume(100); createStopHandler(player); } function addPlayer(video, settings) { const defaults = { height: 360, host: "https://www.youtube-nocookie.com", videoId: video.dataset.id, width: 640 }; defaults.events = { onReady: onPlayerReady }; const playerOptions = combinePlayerOptions(defaults, settings); const player = new YT.Player(video, playerOptions); players.push(player); return player; } return { addPlayer }; }()); const managePlayer = (function makeManagePlayer() { const defaults = { playerVars: { autoplay: 1, controls: 1, disablekb: 1, enablejsapi: 1, fs: 0, iv_load_policy: 3 } };El problema viene de la forma en que inicias el reproductor la primera vez. Cuando se acaba de crear el reproductor, se llama a una función onPlayerReady . Esta función no se llama cuando se abre una ventana emergente por segunda vez.
Debe mantener las referencias a los jugadores y cuando se abre la ventana emergente para que pueda encontrar el jugador que desea y hacer:
player.playVideo(); Veo que los guardas aquí: const players = []; pero no tiene acceso a esto cuando abre la ventana emergente, por lo que realmente no puede llamar a .playVideo() .
Invertiría algo de tiempo en crear una estructura que contenga referencias para el jugador en función de la ventana emergente, por lo que sería algo como:
const players = new Map(); // key can be anything you may use to relate: // - HTML reference -> the element you click could be your key // - string // - other object // - number players.set(anyReasonableKey, playerInstance) // then click handler would be something like this function onPlayButtonClick(event) { const key = event.target; const p = players.get(key); // event target is the key, the play button. // if there is no player if(typeof player === "undefined"){ // the creation with autoplay option should handle fist start of video, because you need to wait for onPlayerReady event makePlayer(key) // here you create it for the first time, and pass the key so you could do the following inside of the function: // players.set(key, player) } else { p.playVideo(); // if player exists, just start playing video } } playButton.addEventListener("click", onPlayButtonClick)O... una forma un poco más fácil (pero no preferible) sería volver a crear el reproductor cada vez que el usuario abre la ventana emergente, de esta manera siempre se reproducirá automáticamente según su configuración de inicio.