3

Buscando en internet encontré esto:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.youtube.com/player_api"></script>

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0"></iframe>

<script type="text/javascript"> 

  var player;

	function onYouTubeIframeAPIReady() {
	  
	  	player = new YT.Player('player');

	}

	$(document).on('mouseover', '#player', function() {

	  player.playVideo();

	});

	$(document).on('mouseout', '#player', function() {

	  player.pauseVideo();

	});  

</script>

link: Reproducir vídeo youtube solo cuando este este en el foco utilizando la YouTube API de IFrame

Pero, no sé cómo lograr ese mismo efecto con varios vídeos de YouTube. Intenté combinarlo con esto:

 var player;
  var player2;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      videoId: 'hdy78ehsjdi'
    });
    player2 = new YT.Player('player', {
      videoId: '81hdjskilct'
    });
  }

link: https://stackoverflow.com/questions/17012886/loading-multiple-video-players-with-youtube-api

Sin embargo, no funciona. ¿Alguien podría por favor ayudarme a resolverlo?

0

1 respuesta 1

2

En vez de asignar cada "player" a una variable, creo un array con todos. De esa forma puedo utilizar los mismos eventos para todos los players.

HTML:

<div id="player1" class="player"></div>
<div id="player2" class="player"></div>

JS:

var players = [];

function onYouTubeIframeAPIReady() {
    players['player1'] = new YT.Player('player1', {
        videoId: 'x14LvDRJc0E'
    });
    players['player2'] = new YT.Player('player2', {
        videoId: '3fs9hRUTOnU'
    });
}

$(document).on('mouseover', '.player', function () {
    players[$(this).attr('id')].playVideo();
});

$(document).on('mouseout', '.player', function () {
    players[$(this).attr('id')].pauseVideo();
});

Ejemplo (no pude hacerlo andar desde el snippet).

Cada <div> tiene un ID con el que identificamos el player y una clase .player para poder identificarlos a todos.

Los eventos se los asociamos a .player y como el ID es igual a la clave que usamos para el array, podemos manipular el player que corresponda.

Tené en cuenta que el primer parámetro de YT.Player() es el ID de un elemento, en este caso un <div>.

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.