Galerie vidéo

by paranoo

HTML

<button>video 0</button>
<button>video 1</button>
<button>video 2</button>
<div id='video'></div>

CSS

#video {
  width: 300px;
  height: 200px;
  background: black;
}

JavaScript

// URL d'intégration de chaque vidéo Youtube
var videos = [
	'https://www.youtube.com/embed/0uaQMxBjd5E',
  'https://www.youtube.com/embed/c8ZPn6p5khI',
  'https://www.youtube.com/embed/ikkrEOD1BbQ',
];

// références vers le DOM
var video = document.getElementById('video');
var buttons = document.getElementsByTagName('button');

// fonction qui retourne une fonction permettant d'intégrer la i-ème vidéo
function pourAfficherVideo(i) {
  return function() {
  	video.innerHTML =  videos[i] 
  };
}

// initialisation des boutons
for (var i = 0; i < buttons.length; i++) {
  buttons[i].onclick = pourAfficherVideo(i);
}

// concepts:
// - tableaux
// - getElementsByTagName()
// - scope (fonctions dans boucles for)
// - fonctions qui retournent des fonctions
// - intégration dynamique de vidéos
// - BONUS: lecture séquentielle automatique
// - BONUS: boutons pour contrôler la vidéo