L’API vidéo

Utiliser l’API native

Ajoute Vidéo

Il est également possible de directement intégrer et piloter la vidéo depuis l’API native des éléments Audio / Vidéo. Il n’est donc pas spécialement nécessaire d’avoir recourt à des paires de balises (<audio> / <video>) et <source> au sein du code HTML.

Javascript peut intégralement prendre en charge cette opération.

Alors, bien que le code HTML ne soit pas utilisé de manière écrite, il va quand même falloir s’assurer de plusieurs points, à savoir, est-ce que le navigateur interprète ou non le format vidéo, mais aussi et surtout le codec employé ?

Nous avons deux manières de procéder : soit comme nous le ferions en HTML, c’est-à-dire en employant des éléments <source> que nous ajouterions au DOM en pointant vers les divers fichiers nécessaires, soit en poursuivant avec l’usage de Javascript et en utilisant l’instruction canPlayType() qui nous renseignera sur la prise en compte, ou non, du format sollicité (attention la réponse ne sera jamais un oui formel).

Par exemple, si la question est vague, disons canPlayType("video/webm"), et que la navigateur interprète bien webM, la réponse sera maybe… car le codec n’est pas précisé… alors que si la question se précise avec un canPlayType("video/webm; codecs=vp8, vorbis"), là, la réponse s’affinera et deviendra probably.

Pour mettre en illustration cet exemple, il suffit d’intégrer quelques fragments de code pour aider la mayonnaise à prendre. Restons focalisés vers le type webM ;

<div id="lavideo" />
<button id="commande" onclick="ajouteVideo()">Ajoute Vidéo</button>
<script>var objvideoAPI = null
	var lavideoAPI = document.getElementById("lavideoAPI");
	var commandeAPI = document.getElementById("commandeAPI");
	function ajouteVideoAPI() {
		if (objvideoAPI == null) {
			objvideoAPI = document.createElement('video');
			if (objvideoAPI.canPlayType("video/webm")){
				objvideoAPI.setAttribute("src","https://www.puce-et-media.com/wp-content/uploads/lapi-video/video.webm"
				objvideoAPI.play()
				lavideoAPI.appendChild(objvideoAPI)
				commandeAPI.textContent = "Rejoue";
			}
		} else {
			objvideoAPI.play()
		}
	} 
</script>