11496 sujets

JavaScript, DOM et API Web HTML5

Hello,

J'ai réussi à intégrer plusieurs videos gràce à l'api youtube:

function onYouTubeIframeAPIReady() {
		player1 = new YT.Player('player1', {
			height: '560',
			width: '315',
			videoId: 'Dz65tvGLYCU',
			events: {
				'onReady': onPlayerReady,
				'onStateChange': onPlayerStateChange
			}
		});
			player2 = new YT.Player('player2', {
			height: '560',
			width: '315',
			videoId: 'G6s8v6r2CU',
			events: {
				'onReady': onPlayerReady,
				'onStateChange': onPlayerStateChange
			}
		});
	}


Pendant la lecture j'aimerai masquer le div qui est juste après l'iframe.
En d'autres termes:
- quand on clique sur "lecture" pour la 1ere vidéo le div .description qui se trouve juste en dessous de la vidéo 1 soit masqué.
- quand on clique sur "lecture" pour la 2eme vidéo le div .description qui se trouve juste en dessous de la vidéo 2 soit masqué.

function onPlayerStateChange(event) {

		switch(event.data) {
			case YT.PlayerState.PLAYING:
				jQuery('.video-wrap > iframe + div.description').hide();
				break;
			case YT.PlayerState.PAUSED:
				jQuery('.video-wrap > iframe + div.description').show();
				break;
			case YT.PlayerState.ENDED:
				jQuery('.video-wrap > iframe + div.description').show();
				break;				
		}
		
	}


Comment est-ce que je peux faire pour passer un parametre supplémentaire à onPlayerStateChange(event) ?

J'aurai bien voulu faire onPlayerStateChange(event, id) mais cela ne fonctionne pas!

EDIT : la solution est =>

function onPlayerStateChange(event) {
    var videoId = event.target.getVideoData().video_id;
    // mon code ici
}

Merci !
Modifié par CaptaineFlamenkueche (12 Sep 2015 - 10:31)