Coder un player Netflix/YouTube en JavaScript, CSS et HTML - Partie 1/2

Les players Netflix ou YouTube contiennent plusieurs fonctionnalités : fullscreen, voir la liste des épisodes, ajout de sous-titres, play/pause en avec la touche espace, la possibilité d'avancer/de reculer de 10 secondes, etc...

On va partir de zéro et on va créer un player en moins de 2h, ensemble !

Pour se faire, nous allons utiliser les technologies suivantes :
  • HTML/CSS
  • JavaScript
  • l'API HTML5 Video

Dans la partie 1, on va voir :

  • ce qu'est l'API HTML5 Video,
  • sa documentation,
  • et un exemple simple pour contrôler la vidéo via JavaScript 

Dans la partie 2, on va :

  • créer les boutons play/pause
  • contrôler la vidéo avec la barre espace pour play/pause
  • les boutons pour avancer/reculer 10 secondes
  • avancer/reculer de 10 secondes avec les flèches du clavier
  • les boutons de playlist pour passer d'une vidéo à une autre
  • passer automatiquement à la vidéo suivante à la fin de la vidéo qui jouait

Partie 1 (14min)

Voici le lien pour accéder à la partie 2 (1h56min).

La partie 2 contient le code source et la vidéo complète du replay.

Pour accéder à la partie 2, vous pouvez créer un compte gratuit ici.

Laisser un commentaire