Contrôler une vidéo par JavaScript

Contrôler le flux par Javascript

>

Lorsque nous faisons appel à de la vidéo ou à de l’audio, au travers d’une balise HTML5, il est toujours possible d’intervenir sur cet élément par Javascript et de le contrôler. Prenons un exemple en insérant une vidéo de manière standard. Afin de simplifier la suite de ce chapitre, plaçons juste un identifiant, ayant pour valeur lavideo. Voir la vidéo ci-contre, et le code utilisé ci-dessous ;

Ajoutons également quelques éléments HTML pour jouer le rôle de la barre de commande externe, et une portion de Javascript qui va nous permettre de contrôler la mise en pause / lecture de cette vidéo :

Fragments de code

<video width="320" height="213" id="lavideo" preload="auto" autoplay loop >
  <source src="https://www.puce-et-media.com/wp-content/uploads/controler-une-video-par-javascript/video.ogv" type="video/ogg">
  <source src="https://www.puce-et-media.com/wp-content/uploads/controler-une-video-par-javascript/video.mp4" type="video/mp4">
  <source src="https://www.puce-et-media.com/wp-content/uploads/controler-une-video-par-javascript/video.webm" type="video/webm">
</video>
<button id="commande" onclick="piloteVideo()">&gt;</button>
<script>
	var lavideo = document.getElementById("lavideo");
	var commande = document.getElementById("commande");
	function piloteVideo() {
		if (lavideo.paused) {
			lavideo.play();
			commande.textContent = "||";
		} else {
			lavideo.pause();
			commande.textContent = ">";
		}
	} 
</script>

Nous voyons qu’il est maintenant très simple d’interagir avec du contenu multimédia, sans entrer dans les problématiques que nous avions par le passé à faire communiquer diverses technologies entre elles. Dans l’exemple nous avons utilisé une seule commande, mais il est possible d’aller bien plus loin et d’avoir accès à tout un panel de possibilités, en dialoguant directement avec l’API native des éléments <audio> et <video> et sans avoir à utiliser une librairie externe quelconque. Le site w3schools propose un HTML Audio/Video DOM Reference qui permet de rapidement se faire une idée des possibilités présentent sous le capot.