1 – Le bouton play
Pour créer le bouton play, nous avons besoin de : pouvoir démarrer la lecture, pouvoir la mettre en pause, connaitre l’état de la vidéo (play/pause). Petit tour sur le site de mozilla, et voilà nos outils: video.play(), video.pause(), video.paused.
Ajoutons aussi une classe au bouton play/pause, qui fera changer son background.
function playButton() {
var video = dojo.byId("video");
var videoButton = dojo.query("#bt-play")[0];
// Nous regardons si la vidéo est en train de lire, pour pire ou mettre en pause.
if (video.paused == false) {
video.pause();
// Ajout d'une classe pour modifier le background du bouton.
dojo.addClass(videoButton, "pause");
// Lancement ou arret de la fonction permettant de gérer la progressbar, qui affiche l'état de lecture en cours
window.clearInterval(timer);
} else {
video.play();
dojo.removeClass(videoButton, "pause");
startSetInterval();
}
}
2 – La barre de lecture
Pour la barre de lecture, nous devons faire bouger deux choses: la quantité de vidéo mise en cache, et la quantité de vidéo déjà lue. Nos outils seront video.currentTime, video.buffered et video.duration.
Un petit calcul simple permet de calculer le pourcentage d’avancée ou de mise en cache. Nous transformons tout ça en string, puis nous l’appliquons sur la taille de la barre concernée. Pour plus de fluidité, j’ai mis une transition sur la modification de taille de ces barres.
Il faut juste créer un timer qui va lancer notre calcul à intervalle régulier. Ce timer démarre quand la vidéo est lue, et stoppe quand elle est arrêtée.
3 – La barre de son
Pour le son , nous devons récupérer le niveau du son ( 0 étant muet et 1 maximal ) et on le transforme en String comme pour la barre de lecture. Enfin on l’applique à video.volume
4 – Un clickEvent sur les barres
Des barres qui bougent, c’est bien, mais des barres avec lesquelles on peut interagir, c’est mieux. Nous allons donc lier les barres à un évènement de clic, qui va calculer la position de la souris par rapport à la taille de la barre. Pour le son, nous n’avons plus qu’à l’appliquer à video.volume (et à mettre à jour l’affichage, bien entendu). Pour la vidéo, il faut penser à le multiplier par le temps total (et là aussi, mettre à jour, au cas où la vidéo serait en pause, et donc le timer serait inactif).
// Listener de click sur la barre principale
function progressBar(event){
var progressbar = dojo.query("#progressbar");
var progressbar_played = progressbar.query(".progressbar-play")[0];
var video = dojo.byId("video");
// Calcul du pourcentage d'avancée
node_width = dojo.coords(progressbar[0]).w;
mouse_pos = event.layerX;
clickPos = mouse_pos/node_width;
video.currentTime = video.duration * clickPos;
dojo.style(progressbar_played, 'width', String(clickPos*100) + "%") ;
}
5 – Le fullscreen
Le bouton fullscreen est là, ajoutons toujours la possibilité de mettre en fullscreen avec les navigateurs compatibles (c’est-à-dire safari, et quelques versions de chrome, normalement).
6 – Des boutons supplémentaires?
Il aurait été pratique d’avoir des boutons avancer et reculer. Ils auraient été très simple à faire : on ajoute ou retire, par exemple, 5 secondes à video.currentTime.