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 :
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.