Solution 2 - Intégration d'une vidéo en HTML5 avec la balise <video>

Introduction

La balise <video> de l'HTML5 est extrêmement pratique pour intégrer une vidéo sur une page web - pour peu que l'on ait un navigateur à jour. Grâce à cette balise, on intègre directement un lecteur vidéo dans la page, sorte de petit Youtube natif au navigateur !

Explications

Syntaxe de base

En prenant la syntaxe de base, voilà ce que cela peut donner, supposons que l'URL de la vidéo corresponde à video.mp4 :

<video src="video.mp4"> </video >

Simple, non ? Dans la "vraie" vie, c'est à peine plus compliqué. Démonstration.

Les attributs

Pour optimiser la lecture, il existe plusieurs attributs.

src définit l'adresse du fichier vidéo
controls permet d'ajouter une barre de contrôle de la vidéo pour mettre en marche, en pause la vidéo, monter ou baisser le son, mettre en plein écran. Attention, il ne définit pas son apparence, chaque navigateur ayant son propre visuel. Il peut être complété par autoplay="true", qui permet de lancer la lecture automatiquement (à utiliser avec parcimonie !).
preload indique comment la vidéo doit être téléchargée avant qu'elle ne soit jouée. "=none" : aucun téléchargement ; "=metadata" : téléchargement des métadonnées uniquement ; "=auto" : laisse le navigateur décider.
poster="image.jpg" permet d'afficher une image de la vidéo, si celle-ci ne se charge pas.
height et width (hauteur et largeur) permettent de dimensionner la vidéo.
muted coupe le son par défaut.
loop indique que la lecture doit s'effectuer en boucle.

Les formats

Si "ça ne marche pas", si la lecture de la vidéo ne fonctionne pas, c'est probablement parce que le format n'est pas supporté par le navigateur.
Pas de panique, la balise vidéo de l'HTML5 permet de proposer des sources multiples, grâce aux "types MIME", pour qu'au moins un format soit reconnu par le navigateur. On se sert pour cela de l'attribut type.

Qu'est ce qu'un format ? Une vidéo est un fichier qui contient des images, du son et du texte (méta données) placés dans un conteneur. A l'intérieur, le tout est compressé. La compression et décompression de ces fichiers sont réalisées par des codecs (acronyme de codage-décodage).

On se concentrera ici sur deux formats principalement :

  • le .mp4 , qui fonctionne avec le codec H.264, un format non-libre, soumis à brevet mais gratuit dans le cas d'une diffusion (gratuite) de vidéos sur le web, lisible nativement sur les navigateurs Apple (Safari, Safari Mobile), Microsoft ainsi que sur Google Chrome.
  • le .webm, avec le codec VP8, un format ouvert lancé par Google, son utilisation est libre et gratuite. Il est lisible sur Chrome, Opéra et Firefox, ainsi qu'avec Internet Explorer 9 (avec plugin chrome).

  • Tableau des compatibilités
    Navigateur .mp4 .webm
    Firefox oui oui
    Internet Explorer oui oui si codecs
    Chrome oui oui
    Safari oui non
    Opera oui oui

    Sur mobile, iOs et Androïd lisent le format .mp4 , le format .webm n'est pas supporté par iOs.

    Step by step

    Code source proposé :

    <video width="297" height="222" controls >
    <source src="minions2.mp4" type="video/mp4" />
    <source src="minions2-2.webm" type="video/webm" />
    Ici l'alternative à la vidéo </video>

    Démonstration

    Pour résumer

    Les avantages

    Plus besoin du (lourd) plugin Flash, qui ne s'affiche pas dans tous les navigateurs, en particulier les iOs. La balise vidéo de l'HTML5 permet une lecture sur tous types d'appareils, et aujourd'hui, seuls les navigateurs qui n'ont jamais été mis à jour ne permettent pas cette lecture native.

    Les inconvénients

    Le principal inconvénient est de devoir encoder une même vidéo en plusieurs formats, puisque tous les navigateurs n'acceptent pas les mêmes codecs.

    Le player offre également peu de variété.

    Supports

    www.http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html

    https://msdn.microsoft.com/fr-fr/library/hh924820%28v=vs.85%29.aspx

    www.kalyzée.com - quel meilleur format vidéo

    www.openclassrooms.com

    https://developer.mozilla.org/fr/docs/Web/HTML/Utilisation_d'audio_et_video_en_HTML

    http://www.w3schools.com/html/html5_video.asp

    http://www.puce-et-media.com/laudio-video-en-html5/