He modificado mi pregunta tras los comentarios de A.Cedano.
Estoy tratando de implementar la API YouTube Player, la implementación funciona correctamente, si hago click en cualquier button la primera vez, si funciona y inicia el video, ahora el problema viene si hago un segundo onclick para abrir otro video, este no cambia y el video anterior se sigue reproduciéndose y no cambia, en cambio el alert si me muestra el nuevo data-id obtenido para reproducir el nuevo video.
¿Como podría parar el video que se está reproduciendo y recargar el nuevo video en cada onclick?
Para obtener el data-id he usado este ejemplo: Soes
<head>
<script>
/*
Con querySelectorAll haremos un alcance más específico
el selector usado aquí signfica simplemente:
"selecciona todos los elementos de tipo button
que tengan la clase btn-Editar"
Significa que otros botones quedarán aislados de esta escucha
así como otros elementos que tengan esa clase, pero no sean button
*/
var editButtons = document.querySelectorAll('button.btn-Play');
/*
A los elementos alcanzados por el criterio antes indicado
le asignamos un listener...
Significa que el click en cualquiera de esos elementos
ejecutará el código contenido en la función
en este caso recuperar el data-id
*/
editButtons.forEach(function(item, idx) {
item.addEventListener('click', function() {
/*
Usaremos la forma que existe para leer los atributos data
que es dataset
*/
//console.log(item.dataset.id);
Player(item.dataset.id);
});
});
</script>
</head>
<body>
<!-- Reproductor Youtube -->
<div id='player'></div>
<button class="btn-Play" data-id="n7l1oAYRThQ">Video 1</button>
<button class="btn-Play" data-id="G3P1IJaY6AA">Video 2</button>
<button class="btn-Play" data-id="353B-kOxWz4">Video 3</button>
//Etc..
<script>
function Player(id) {
// alert(id);
// Api Youtube Player
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
window.onYouTubeIframeAPIReady = function() {
// function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: id,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
//setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
}
</script>
</body>
/*
Con querySelectorAll haremos un alcance más específico
el selector usado aquí signfica simplemente:
"selecciona todos los elementos de tipo button
que tengan la clase btn-Editar"
Significa que otros botones quedarán aislados de esta escucha
así como otros elementos que tengan esa clase, pero no sean button
*/
var editButtons = document.querySelectorAll('button.btn-Play');
/*
A los elementos alcanzados por el criterio antes indicado
le asignamos un listener...
Significa que el click en cualquiera de esos elementos
ejecutará el código contenido en la función
en este caso recuperar el data-id
*/
editButtons.forEach(function(item, idx) {
item.addEventListener('click', function() {
/*
Usaremos la forma que existe para leer los atributos data
que es dataset
*/
//console.log(item.dataset.id);
Player(item.dataset.id);
});
});
<!-- Reproductor Youtube -->
<div id='player'></div>
<button class="btn-Play" data-id="n7l1oAYRThQ">Video 1</button>
<button class="btn-Play" data-id="G3P1IJaY6AA">Video 2</button>
<button class="btn-Play" data-id="353B-kOxWz4">Video 3</button>
<script>
function Player(id) {
alert(id);
// Api Youtube Player
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
window.onYouTubeIframeAPIReady = function() {
// function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: id,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
//setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
}
</script>
También me gustaría redirigir cuando se hace el onclick en cada boton que se vaya al reproductor ya que este es cargado más arriba (<div id='player'></div>
).
Luego, ¿Al usar onlick para reproducir los videos, existe alguna opción de iniciar el video numero 1 al cargar la página?