Supporté par ChromeSupporté par FirefoxSupporté par EdgeSupporté par Safari/iOS <video> : Démo HTML5

Mise à jour : 2015-10-19

Une balise dédiée permet l'intégration de la vidéo.
Cela devient plus facile et plus intuitif d'intégrer de la vidéo (aussi facile que pour une image).
L'auteur d'une page web ne doit plus se soucier de savoir si l'utilisateur possède les bons codecs, car ceux-ci sont inclus de manière native.
De plus, une API, accessible via JavaScript permet d'interagir avec la vidéo en plus de commandes intégrées.


<video>

API

Types MIME


Il faut veiller à envoyer le bon type MIME afin que la video soit identifiée au bon format.
Cela peut se faire par configuration du serveur web, ou plus simplement à l'aide du fichier ".htaccess" via la ligne "AddType video/[format] .[extension]".

Formats


Formats supportés
  Logo Chrome Logo Firefox Logo Edge Logo Safari/iOS
OGG Item supporté Item supporté Item non supporté Item non supporté
WEBM Item supporté Item supporté Item non supporté Item non supporté
H264 Item supporté Item supporté Item supporté Item supporté

Notes sur le tuto


Exemple de code HTML5

<script>
	function rewind(i){
		document.getElementsByTagName("video")[i].currentTime=0
	}
	function playpause(i,btn){
		video=document.getElementsByTagName("video")[i]
		if(video.paused){
			video.play()
			btn.value="||"
		}else{
			video.pause()
			btn.value=">"
	}	}
</script>
OGG :<br>
<video src="media/windowsill.ogv" poster="img/poster.png" autoplay controls loop>
	<span class="ko">&lt;video&gt; non supportée !</span></video><br>
<input type="button" value="|<" onclick="rewind(0)"/>
<input type="button" value="||" onclick="playpause(0,this)"/><br><br>

WEBM :<br>
<video src="media/webm/windowsill.webm" poster="img/poster.png" autoplay controls loop>
	<span class="ko">&lt;video&gt; non supportée !</span></video><br>
<input type="button" value="|<" onclick="rewind(1)"/>
<input type="button" value="||" onclick="playpause(1,this)"/><br><br>

H264 :<br>
<video src="media/windowsill.mp4" poster="img/poster.png" autoplay controls loop>
	<span class="ko">&lt;video&gt; non supportée !</span></video><br>
<input type="button" value="|<" onclick="rewind(2)"/>
<input type="button" value="||" onclick="playpause(2,this)"/>

Démonstration du résultat HTML5


OGG :



WEBM :



H264 :