Après le zoom sur l’élément audio dans l’article HTML5 – Rich Media (2nde) : Audio , voici la 3e et dernière partie HTML5 ‘Rich Media’ consacrée à l’élément vidéo.
De nos jours, avec l’augmentation constante de la bande passante mise à disposition des utilisateurs, le contenu vidéo est devenu incontournable.
Les plugins Flash d’Adobe et à un degré moindre SilverLight de Microsoft sont les technologies majeures permettant la diffusion de vidéo sur le web.
Voyons ce que HTML5 nous propose pour s’affranchir de ces technos propriétaires, ce qui soit dit en passant est extrêmement intéressant pour les plates-formes Apple iOS ne supportant pas Flash…).
L’élément video
Attributs
L’implémentation de l’élément HTML5 video est aussi aisée que pour l’élément audio.
Il possède les mêmes attributs :
- autoplay : lecture imposée,
- loop : boucle imposée,
- preload : téléchargement anticipé,
- src : emplacement source de la vidéo,
- controls : accès aux boutons de contrôle de la vidéo.
Une vidéo, par nature, est visible, et il faut donc penser lui réserver un espace physique de diffusion ainsi qu’à préciser ses dimensions lors de l’appel. Il est également possible de spécifier au navigateur d’afficher une image représentative en utilisant l’attribut poster.
<video src="ma_video.mp4" controls width="360" height="240" poster="image_representative.jpg" ></video>
Vous avez évidemment le choix pour l’interface utilisateur entre l’interface native du navigateur, auquel cas l’utilisateur verra celle-ci changer suivant le navigateur utilisé (mais il gardera ses habitudes puisqu’il connaît déjà l’interface de son navigateur), et une interface designée par vos propres soins.
Formats
Au niveau des formats vidéo, la problématique étant la même que pour le son, il nous faut :
- – fournir différents formats, propriétaires, comme mp4 ou libres, comme ogv,
- – prévoir une solution de repli, telle que le lecteur Flash.
- – prévoir une seconde solution de repli, pour ceux qui n’ont pas et ne veulent pas Flash :
une phrase explicative et un lien tout bête pour télécharger la vidéo en local !
<video controls width="360" height="240" poster="poster.jpg" > <source src="ma_video.mp4" type="video/mp4"> <source src="ma_video.webm" type="video/webm"> <source src="ma_video.ogv" type="video/ogg"> <object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file= ma_video.mp4"> <param name=" ma_video " value="player.swf?file= ma_video.mp4"> <a href=" ma_video.mp4">Télécharger la vidéo</a> Désolé, comme vous possédez un ancien navigateur et que Flash n’est pas présent, vous devez télécharger la vidéo pour la visionner. </object> </video> Téléchargement : <a href="ma_video.mp4" type="video/mp4"> vidéo au format mp4</a> < a href ="ma_video.webm" type="video/webm"> vidéo au format webm</a> < a href ="ma_video.ogv" type="video/ogg">vidéo au format ogg</a>
Quels sont (succinctement) les principaux formats de compression vidéo rencontrés aujourd’hui ?
| Formats | Support | Description | Source |
|---|---|---|---|
| H.264/MP4 | MPEG (Moving Picture Experts Group) | non-libre / non-gratuit, sauf pour certaines utilisations comme la diffusion de vidéos sur sites Web | mpegla.com |
| OGG/Theora | Xiph.org Foundation | open-source, sans brevets | theora.org |
| WebM | libre et gratuite | webmproject.org |
RealVideo, Windows Media Video ???
Quelles sont les compatibilités des différents formats avec les navigateurs actuels ?
| Navigateurs | H.264/MP4 | OGG Theora | WebM |
|---|---|---|---|
| IE | 9+ | X | uniquement si les codecs sont installés |
| Firefox | X | 3.5+ | 4+ |
| Chrome | 4.16 | 4+ | 6+ |
| Safari | 5+ | X | X |
| Opéra | X | 10.5+ | 10.6+ |
Cette discordance nous oblige donc de facto à encoder une vidéo avec plusieurs codecs, si nous voulons être un tant soit peu ‘cross-browsers’.
Liste des encodeurs :
Il existe une multitude de logiciels d’encodage vidéo, en voici quelques uns :
| Encodeur | Description | Support | Site |
|---|---|---|---|
| Miro Video Converter | libre et gratuit | MP4, WebM et Ogg | mirovideoconverter.com |
| Wtheora | open-source, sans brevets | Ogg | wtheora |
Nota Bene
Pensez à placer la vidéo au format .mp4 en tête de liste, car il n’y a qu’ainsi que les devices sous iOS sauront lire votre vidéo.
Style
Contrairement à un plug-in, il est possible d’appliquer un style particulier à l’élément HTML5 video, de la même façon qu’à l’élément img.
Et IE6 alors ?
Ah oui, bien sûr, IE6 et précédents…
Il faut en plus de nos déclarations de différents formats, du fallback Flash, pensez au fallback IE6 et inférieurs…
Pour cela, il est nécessaire de passer par la balise embed , à encadrer bien sûr par un commentaire conditionnel !
Autres considérations
Un des problèmes généré par l’utilisation d’un plugin est que le contenu est par nature dé-corrélé du reste de la page. Utiliser des éléments Rich Media natifs permet leur adéquation avec les autres technologies natives du navigateur, CSS et JavaScript.
Il va sans dire que les majors telles que Google se font une joie d’avoir à disposition cette avancée technologique.
YouTube, leader mondial de la diffusion vidéo sur le net, propose déjà à ceux qui surfe via un navigateur compatible, de se passer du Flash Player.
Plus
Voici quelques liens qui vous permettront de poursuivre votre plongée dans cet univers fascinant :
http://html5demos.com/video-canvas
https://developer.mozilla.org/en/Using_HTML5_audio_and_video
Tag vidéo par w3schools.com
