<video> : Démo HTML5
Mise à jour : 2017-01-22
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>
- src : URL du fichier audio.
- poster : affiche une image lorsque le média n'est pas disponible.
- autoplay : joue le fichier automatiquement.
- loop : joue en boucle.
- controls : affiche les contrôles.
- <source> : permet de spécifier des contenus alternatifs.
API
- currentTime : offset de lecture du média.
- play() : joue le fichier.
- paused : indique si le fichier est en pause.
- pause() : pause le fichier
- ...
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
OGG | ||||
WEBM | ||||
H264 |
Notes sur le tuto
- Le mode plein écran n'est pas accessible via l'API afin de préserver les intérêts de l'utilisateur.
- Limitations :
- Firefox nécessite l'ajout de la ligne "AddType video/ogg .ogv" dans le fichier ".htaccess" pour les sites hébergés chez le FAI Free.
- Firefox et Opera nécessitent l'ajout de la ligne "DefaultType video/webm" dans le fichier ".htaccess" du dossier des vidéos pour le FAI Amen.
- Safari sous iOS ne démarre pas automatiquement la lecture des vidéos.
- Page dédiée sur le support de cette balise et de ses différents formats sur Wikipédia.
- La vidéo en HTML5 sur Dailymotion et YouTube.
- Tout ce que vous devez savoir sur l'audio et la vidéo en HTML5.
- Vidéos ci-dessous empruntées sur Opera (d'autres formats sur JoJaBa).
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"><video> 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"><video> 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"><video> 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 :