Créer des vidéos ou musiques HTML5 et les inclure sur un site

HTML5 est une technologie nouvelle, révolutionnaire dont vous avez sans doute entendu parler ! Mais savez-vous qu'il permet d'inclure des vidéos ou des sons dans les pages web? 

Banal, me direz-vous, sauf qu'avec HTML5, plus besoin de plugin !!! Flash, Silverlight, QuickTime : c'est fini !

La balise vidéo d’HTML5

Quel code utiliser ?

Pour rajouter une vidéo HTML5 sur un site, il faut utiliser le code suivant :

<video src="nomdufichier.typedufichier"> description </video>

Sur une page HTML5 simple, cela donne donc :

<!DOCTYPE html>
<html>
<head>
    <title>Nom de la page</title>
</head>
<body>
     <video src="nomdufichier.typedufichier"> description </video>
</body>
</html>

 

Ce code est assez aisé à utiliser. On peut toutefois lui rajouter de nombreuses autres fonctions :

  • autoplay : Il permet de démarrer la lecture automatiquement (non encouragé).
  • loop : Il permet de jouer en boucle le fichier.
  • controls : Il permet d'utiliser les contrôles classiques (lecture, pause...).
  • preload : Il indique au navigateur de précharger le fichier media. L'attribut preload peut prendre 3 valeurs :
none = pas de préchargement;
auto = préchargement;
metadata = préchargement uniquement des métadonnées du fichier vidéo.
  • Muted : Il permet de mettre la sourdine.. L’utilisateur peut toutefois réactiver le son.
  • Width/Height : Les dimensions de l'image.

Quel(s) type(s) de fichier utiliser utiliser ?

Il existe trois types de fichiers vidéos (codecs) HTML5 :

H.264 : Ce codec est soumis à des royalties que les éditeurs de navigateurs doivent payer  pour utiliser. Ce codec est actuellement un des formats les plus utilisés, pour les Blu-ray, les sites de streaming, dans les plug-ins .

De nombreux matériels sont compatibles avec le codec H.264.

Theora/Ogg : codec libre proposé par la fondation Xiph.org. Theora est sous licence de type BSD. Informations complémentaires : http://fr.wikipedia.org/wiki/Theora

WebM : codec audio/vidéo libre donné à la communauté par Google suite au rachat de la société On2 Technologies. Codec annoncé lors de la conférence Google I/0 en mai 2010. Informations complémentaires : http://www.webmproject.org/. Je recommande ce codec car il est supporté par le plus grande nombres des navigateurs récents.

A noter, c’est les extensions de fichiers (containers) utilisables :
 

  1. .mp4 pour les vidéos en H.264  
  2. .webm pour les vidéos en WebM  
  3. .ogv pour les vidéos en Theora

Seulement voilà, il va être difficile de choisir d’encoder avec un seul codec les vidéos sous peine de perdre une partie de l’audience (par non support du codec). Il va donc probablement falloir encoder les vidéo en 2 voire 3 formats.

Les formats à retenir sont selon moi le H264 et le WebM. Le premier est le plus répandu actuellement (dans les appareils électroniques, la chaine de montage audio-visuelle et les grosses plateformes de streaming). Le second (WebM) est quand à lui supporté par quatre navigateurs sur cinq et libre.

Le W3C(World Wide Web Consortium) a prévu l'intégration de plusieurs sources pour une même vidéo (plusieurs codecs). Autre note : suite un bug sur l’iPhone/iPad , la source H.264 doit être mise en premier dans la liste. Conseil : proposer une version basse résolution de la vidéo (moins lourde pour le serveur et le CPU/GPU de l'ordinateur client).

Voici comment ajouter le support d’autres codecs (ceci est un exemple) :

Ajoutez le code suivant dans les balises body de votre page :
 <video controls>
 <source src="video.mp4" type="video/mp4"/>
 <source src="video.ogg" type="video/ogg"/>
</video>

HTML5 dispose cependant de certaines limites qui retarde son utilisation :

1.Aucune protection de contenu

Les adresses (URL) des vidéos sont utilisables par tous et les vidéos sont aisément téléchargeables. Dans le cas d’une plateforme de VoD (Vidéo à la demande) payante et légale, cette solution n'est pas envisageable. La balise vidéo d’HTML5 ne supporte pas aujourd’hui de mécanismes de DRM (Gestion des droits numériques) à la différence de Flash ou Silverlight.

 2.Pas de mécanismes de suivi et d’analyse

Il est actuellement complexe pour les webmasters d’avoir des informations sur les vidéos vues (% de la vidéo téléchargée et visualisée par l’utilisateur, nombres de vues, débit de réception de l'utilisateur, parties visualisées ou pas,  …).

3.Pas de systèmes recommandés pour les publicités

Une société financée par la publicité ne voit pas d’un très bon oeil HTML5 et sa balise vidéo car l'utilisation de publicités est  complexe avec HTML5.

4.La lecture en plein écran

Avec la balise video d’HTML5 et les contrôles fournis, il n’est pas possible de basculer en mode plein écran pour la lecture d’une vidéo. Ce problème est généralement solutionné par l’usage de lecteurs plus avancés que celui des navigateurs 

Note : sous Firefox, il est possible basculer en plein écran; fonction non disponible dans Google Chrome ou IE 9.

La balise audio d’HTML5

Quel code utiliser ?

Pour rajouter une son HTML5 sur un site, il faut utiliser le code suivant :

<audio src="nomdufichier.typedufichier"> description </audio>

Aussi simple que la vidéo !!!

Quel(s) type(s) de fichier utiliser utiliser ?

MP3 (MPEG1/MPEG2 layer III) : format très classique et omniprésent, ce codec audio n'est pas un format ouvert. Comme le MP3 est un format soumis à brevets, payer des droits pour l'utiliser.

Vorbis : codec libre dont l'extension est .ogg.

AAC : codec libre dont les extensions sont .aac, .m4a, .m4p, .m4b, .3gp. Il a pour but d’offrir un meilleur ratio Qualité/débit binaire que le format MP3.

Le format Wav est également utilisable.

Voici comment ajouter le support d’autres codecs (ceci est un exemple) :

Ajoutez le code suivant dans les balises body de votre page : 

<audio controls>
 <source src="musique.mp3" type="audio/mp3"/>
 <source src="musique.ogg" type="audio/ogg3"/>
</audio>

Et voilà, vous avez maintenant tout pour inclure une vidéo HTML5 sur votre site !!!

Créer un site gratuit avec e-monsite - Signaler un contenu illicite sur ce site