Comment intégrer un player video HTML5 avec du Javascript ?

Pour tout savoir sur la balise vidéo du HTML5, voici le dernier article de la série traitant de l’histoire, du fonctionnement et des façons d’intégrer la balise Vidéo dans vos sites web. Aujourd’hui, nous parlerons de la création de contrôles en javascript.

Nous voilà arrivés à la fin de notre dossier sur la vidéo HTML5, avec ici un tutoriel expliquant comment contrôler une vidéo HTML5 avec du javascript.

Pour contrôler la vidéo, nous allons utiliser l’interface qu’intègrent les navigateurs. Grâce au W3C, elle est presque identique sur tout les navigateurs. Pour plus de renseignement, je conseille de la lire sur le site de mozilla pour avoir une vue d’ensemble des possibilités.

Comme framework, j’ai utilisé Dojo uniquement sur des fonctions très simples. Il sera aisé de le remplacer par jQuerry, par exemple.

Apres avoir lu la doc de l’interface, nous pouvons voir une des limitations principales des players HTML5 : le fullscreen est absent. Pour des raisons de confort utilisateur, le W3C ne voulait pas que les vidéos puissent s’ouvrir en plein écran sans son consentement. Il n’y a donc pas de possibilité native de mettre une vidéo en fullscreen, il faut ajouter une extension dans votre navigateur.

Une façon de faire du fullscreen existe, en jouant sur la position, la taille et le zorder de la vidéo, mais cela mériterait un gros tuto à lui tout seul pour un résultat assez moche. Plus d’informations sont en commentaire dans ma source.

Ce tutoriel ne rendra pas tous les boutons du player fonctionnels : le bouton fullscreen ne sera pas abordé pour les raisons citées plus haut, les boutons équaliseur ( trop complexes ) et les favoris non plus ( traitant plutot de la partie serveur , le javascript étant une requète asynchrone et un changement de classe )

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.

Pour le slide, nous allons utiliser une des particularités du HTML sur le xHTML: il est valide de créer des attributs non reconnu par le navigateurs (même si le validateur du W3C ne les reconnaitra pas comme valide.) Nous ajoutons donc sur les li du slide des arguments créés de toutes pièces: m4vPath, oggPath, webmPath, flashPath, ou autre, pour spécifier les liens vers les différents formats de chaque vidéo.

Avec un évènement onClick sur les li, nous pouvons donc changer les valeurs des balises source de la vidéo. Mais cela ne suffit pas, il faut aussi dire à la vidéo de se recharger, ce qui se fait avec un video.load()… ou pas. Cette technique marche très bien avec Firefox et Opera, par contre, Safari, Chrome et IE ne le gèrent pas encore.

La technique que j’ai trouvée en remplacement est de cloner l’élément vidéo, l’ajouter à la liste d’affichage, et détruire l’ancien. Ce n’est peut-être pas très propre, mais au moins, ça marche. C’est néanmoins encore une preuve du support tout relatif du HTML5 par les navigateurs.

// Mise en place du listener sur toute les images
dojo.query("#slide li").connect("onclick", function(evt){
  // récupèration des données entrée dans les attributs
  m4vpath = dojo.attr(evt.currentTarget, "m4vpath");
  webmpath = dojo.attr(evt.currentTarget, "webmpath");

  // Mise à jour des balises sources
  sources = dojo.query("#video source");
  sources[1].src = webmpath;
  sources[0].src = m4vpath;
					
  // "Mise à jour" à la brute de la balise vidéo par clonage/destruction de la balise vidéo.
  video = dojo.byId('video');
  video_clone = video.cloneNode(true);
  dojo.destroy(video);
  dojo.byId('player').appendChild(video_clone);
  //video.load();					
});

Voilà, nous avons un player HTML5 avec un slide pour ranger des vidéos. Bien sûr, il n’est pas réellement complet, mais, tout comme les ressources de Sebastien Gabriel, il est surtout là pour vous fournir une base simple à modifier. Il devrait être très simple pour vous, si vous m’avez lu jusque-là, d’ajouter la possibilité de couper le son et de changer l’icone du son en cliquant dessus, de changer n’importe quelle image, ou de faire un sprite avec les images.

Et pour les plus codeurs d’entre vous, il serait faisable, et même une bonne idée, de mettre le HTML dans une template séparée, et d’appeler les vidéos avec une simple fonction, ou bien, à la mode dojo, de créer un marquage genre dojotype= »video », et de passer toutes les infos nécessaires dans le HTML, et parser lorsque la page a fini de charger.

J’espère que cet article vous a plu, et vous souhaite une bonne semaine!