208 199 visites depuis 7 jours,
dont 2 450 sur ce chapitre
classé 1/786
Depuis l'arrivée de Youtube et Dailymotion, il est devenu courant aujourd'hui de regarder des vidéos sur des sites web. Il faut dire que l'arrivée du haut débit a aidé à démocratiser les vidéos sur le Web.
Cependant, aucune balise HTML ne permettait jusqu'ici de gérer la vidéo. Il fallait à la place utiliser un plugin, comme Flash. Encore aujourd'hui, Flash reste de loin le moyen le plus utilisé pour regarder des vidéos sur Youtube, Dailymotion, Vimeo et ailleurs. Mais utiliser un plugin a de nombreux défauts : on dépend de ceux qui gèrent le plugin (en l'occurence, l'entreprise Adobe, qui possède Flash), on ne peut pas toujours contrôler son fonctionnement, il y a parfois des failles de sécurité… Au final, c'est assez lourd.
C'est pour cela que deux nouvelles balises standard ont été créées en HTML5 : <video> et <audio> !
Lorsque je vous ai présenté les images et la balise <img/>, j'ai commencé par un petit tour d'horizon des différents formats d'images (JPEG, PNG, GIF, etc.). Pour la vidéo et l'audio, je vais faire pareil… mais c'est plus compliqué.
En fait, le fonctionnement des vidéos est même tellement complexe qu'on pourrait faire un cours entier à ce sujet ! Étant donné qu'on parle ici de HTML, nous n'allons pas passer toutes nos prochaines nuits à étudier les subtilités de l'encodage vidéo. Je vais donc simplifier les choses et vous expliquer juste ce que vous avez besoin de savoir.
Les formats audio
Pour diffuser de la musique ou n'importe quel son, il existe de nombreux formats. La plupart d'entre eux sont compressés (comme le sont les images JPEG, PNG et GIF) ce qui permet de réduire leur poids :
MP3 : vous ne pouvez pas ne pas en avoir entendu parler ! C'est l'un des plus vieux, mais aussi l'un des plus compatibles (tous les appareils savent lire des MP3), ce qui fait qu'il est toujours très utilisé aujourd'hui.
AAC : utilisé majoritairement par Apple sur iTunes, c'est un format de bonne qualité. Les iPod, iPhone et autres iPad savent les lire sans problème.
OGG : le format Ogg Vorbis est très répandu dans le monde du logiciel libre, notamment sous Linux. Ce format a l'avantage d'être libre, c'est-à-dire qu'il n'est protégé par aucun brevet.
WAV (format non compressé) : évitez autant que possible de l'utiliser car le fichier est très volumineux avec ce format. C'est un peu l'équivalent du Bitmap (BMP) pour l'audio.
Aucun navigateur ne gère tous ces formats à la fois. Retenez surtout la compatibilité pour les MP3 et OGG :
Navigateur
MP3
OGG
Internet Explorer
Oui
-
Chrome
Oui
Oui
Firefox
-
Oui
Safari
Oui
-
Opera
-
Oui
Il n'y a pas de format « idéal » reconnu par tous les navigateurs ?
Eh non ! Heureusement, on pourra proposer différents formats aux navigateurs qui sélectionneront alors celui qu'ils savent lire.
Les formats vidéo
Le stockage de la vidéo est autrement plus complexe. On a besoin de trois éléments :
Un format conteneur : c'est un peu comme une boîte qui va servir à contenir les deux éléments ci-dessous. On reconnaît en général le type de conteneur à l'extension du fichier : AVI, MP4, MKV…
Un codec audio : c'est le format du son de la vidéo, généralement compressé. Nous venons de les voir, on utilise les mêmes : MP3, AAC, OGG…
Un codec vidéo : c'est le format qui va compresser les images. C'est là que les choses se corsent, car ces formats sont complexes et on ne peut pas toujours les utiliser gratuitement. Les principaux à connaître pour le Web sont :
H.264 : l'un des plus puissants et des plus utilisés aujourd'hui… mais il n'est pas 100% gratuit. En fait, on peut l'utiliser gratuitement dans certains cas (comme la diffusion de vidéos sur un site web personnel), mais il y a un flou juridique qui fait qu'il est risqué de l'utiliser à tout va.
Ogg Theora : un codec gratuit et libre de droits, mais moins puissant que H.264. Il est bien reconnu sous Linux mais, sous Windows, il faut installer des programmes pour pouvoir le lire.
WebM : un autre codec gratuit et libre de droits, plus récent. Proposé par Google, c'est le concurrent le plus sérieux de H.264 à l'heure actuelle.
Quelle est la compatibilité des codecs vidéo sur les différents navigateurs ? Là encore, vous allez voir que c'est un joyeux bazar :
Navigateur
H.264
Ogg Theora
WebM
Internet Explorer
Oui
-
Oui
Chrome
-
Oui
Oui
Firefox
-
Oui
Oui
Safari
Oui
-
-
Opera
Oui
Oui
Oui
Là encore, aucun format ne sort du lot. Il est conseillé de proposer chaque vidéo dans plusieurs formats pour qu'elle soit lisible sur un maximum de navigateurs.
Pour convertir une vidéo dans ces différents formats, je vous conseille l'excellent logiciel gratuit Miro Video Converter que vous pouvez télécharger grâce au code web ci-dessous.
Il vous suffit de glisser-déposer votre vidéo dans la fenêtre du programme et de sélectionner le format de sortie souhaité. Cela vous permettra de créer plusieurs versions de votre vidéo !
La balise <audio> que nous allons découvrir est reconnue par tous les navigateurs récents, y compris Internet Explorer à partir de la version 9 (IE9).
En théorie, il suffit d'une simple balise pour jouer un son sur notre page :
Code : HTML
1
<audiosrc="musique.mp3"></audio>
En pratique, c'est un peu plus compliqué que cela.
Si vous testez ce code… vous ne verrez rien ! En effet, le navigateur va seulement télécharger les informations générales sur le fichier (on parle de métadonnées) mais il ne se passera rien de particulier.
Vous pouvez compléter la balise des attributs suivants :
controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement. Cela peut sembler indispensable, et vous vous demandez peut-être pourquoi cela n'y figure pas par défaut, mais certains sites web préfèrent créer eux-mêmes leurs propres boutons et commander la lecture avec du JavaScript.
width : pour modifier la largeur de l'outil de lecture audio.
loop : la musique sera jouée en boucle.
autoplay : la musique sera jouée dès le chargement de la page. Évitez d'en abuser, c'est en général irritant d'arriver sur un site qui joue de la musique tout seul !
preload : indique si la musique peut être préchargée dès le chargement de la page ou non. Cet attribut peut prendre les valeurs :
auto (par défaut) : le navigateur décide s'il doit précharger toute la musique, uniquement les métadonnées ou rien du tout.
metadata : charge uniquement les métadonnées (durée, etc.).
none : pas de préchargement. Utile si vous ne voulez pas gaspiller de bande passante sur votre site.
On ne peut pas forcer le préchargement de la musique, c'est toujours le navigateur qui décide.
Les navigateurs mobiles, par exemple, ne préchargent jamais la musique pour économiser la bande passante (le temps de chargement étant long sur un portable).
Ajoutons les contrôles et ce sera déjà mieux !
Code : HTML
1
<audiosrc="hype_home.mp3"controls></audio>
L'apparence du lecteur audio change en fonction du navigateur. La figure suivante représente par exemple le lecteur audio dans Google Chrome.
Le lecteur audio dans Google Chrome
Pourquoi ouvrir la balise pour la refermer immédiatement après ?
Cela vous permet d'afficher un message ou de proposer une solution de secours pour les navigateurs qui ne gèrent pas cette nouvelle balise. Par exemple :
Code : HTML
1
<audiosrc="hype_home.mp3"controls>Veuillez mettre à jour votre navigateur !</audio>
Ceux qui ont un navigateur récent ne verront pas le message. Les anciens navigateurs, qui ne comprennent pas la balise, afficheront en revanche le texte qui se trouve à l'intérieur.
Je vous conseille de proposer une solution de secours en Flash, comme Dewplayer. Vous placerez le code correspondant à Flash entre les balises <audio> et </audio> : ainsi, les anciens navigateurs afficheront le lecteur Flash, tandis que les nouveaux afficheront le lecteur natif.
On a vu que certains navigateurs ne géraient pas le MP3, comment faire ?
Il faut proposer plusieurs versions du fichier audio. Dans ce cas, on va construire notre balise comme ceci :
La balise TODO que nous allons découvrir est reconnue par tous les navigateurs récents, y compris Internet Explorer à partir de la version 9 (IE9).
Il suffit d'une simple balise TODO pour insérer une vidéo dans la page :
Code : HTML
1
TODO
Mais, là encore, vous risquez d'être déçus si vous utilisez seulement ce code. Aucun contrôle ne permet de lancer la vidéo !
Rajoutons quelques attributs (la plupart sont les mêmes que pour la balise <audio>) :
poster : image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée. Par défaut, le navigateur prend la première image de la vidéo mais, comme il s'agit souvent d'une image noire ou d'une image peu représentative de la vidéo, je vous conseille d'en créer une ! Vous pouvez tout simplement faire une capture d'écran d'un moment de la vidéo.
controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement. Cela peut sembler indispensable, mais certains sites web préfèrent créer eux-mêmes leurs propres boutons et commander la lecture avec du JavaScript. En ce qui nous concerne, ce sera largement suffisant !
width : pour modifier la largeur de la vidéo.
height : pour modifier la hauteur de la vidéo.
loop : la vidéo sera jouée en boucle.
autoplay : la vidéo sera jouée dès le chargement de la page. Là encore, évitez d'en abuser, c'est en général irritant d'arriver sur un site qui lance quelque chose tout seul !
preload : indique si la vidéo peut être préchargée dès le chargement de la page ou non. Cet attribut peut prendre les valeurs :
auto (par défaut) : le navigateur décide s'il doit précharger toute la vidéo, uniquement les métadonnées ou rien du tout.
metadata : charge uniquement les métadonnées (durée, dimensions, etc.).
none : pas de préchargement. Utile si vous souhaitez éviter le gaspillage de bande passante sur votre site.
On ne peut pas forcer le préchargement de la vidéo, c'est toujours le navigateur qui décide.
Les proportions de la vidéo sont toujours conservées. Si vous définissez une largeur et une hauteur, le navigateur fera en sorte de ne pas dépasser les dimensions indiquées mais il conservera les proportions.
Voici un code un peu plus complet :
Code : HTML
1
TODO
Et le résultat à la figure suivante.
Une vidéo avec les options de lecture et une taille définie
Pourquoi ouvrir et refermer immédiatement après la balise ?
La réponse est la même que pour la balise <audio>. Cela vous permet d'afficher un message ou d'utiliser une technique de secours (en Flash) si le navigateur ne reconnaît pas la balise :
Code : HTML
1
TODO
Comment contenter tous les navigateurs, puisque chacun reconnaît des formats vidéo différents ?
Vous utiliserez la balise <source> à l'intérieur de la balise TODO pour proposer différents formats. Le navigateur prendra celui qu'il reconnaît :
Les iPhone, iPad et iPod ne reconnaissent à l'heure actuelle que le format H.264 (fichier .mp4)… et uniquement si celui-ci apparaît en premier dans la liste ! Je vous recommande donc d'indiquer le format H.264 en premier pour assurer une compatibilité maximale.
Comment afficher la vidéo en plein écran ?
Ce n'est pas possible à l'heure actuelle. En fait, il existe bien un moyen sous Firefox mais il est un peu caché : il faut faire un clic droit sur la vidéo, puis sélectionner « Plein écran ».
Il n'y a pas de moyen de forcer le plein écran, même en JavaScript. Cela peut se comprendre, car des sites pourraient perturber fortement la navigation des visiteurs en affichant des vidéos en plein écran sans leur demander leur accord !
Comment protéger ma vidéo, je ne veux pas qu'on puisse la copier facilement !
Ce n'est pas possible. Les balises n'ont pas été conçues pour limiter ou empêcher le téléchargement. C'est assez logique quand on y pense : pour que le visiteur puisse voir la vidéo, il faut bien de toute façon qu'il la télécharge d'une manière ou d'une autre !
N'espérez donc pas empêcher le téléchargement de votre vidéo avec cette technique.
Les lecteurs vidéo Flash permettent de « protéger » le contenu des vidéos mais, là encore, des solutions de contournement existent. De nombreux plug-ins permettent de télécharger les vidéos, de Youtube par exemple.
Insérer de la musique ou de la vidéo n'était pas possible autrefois en HTML. Il fallait recourir à un plugin comme Flash.
Depuis HTML5, les balises <audio> et TODO ont été introduites et permettent de jouer de la musique et des vidéos sans plugin.
Il existe plusieurs formats audio et vidéo. Il faut notamment connaître :
pour l'audio : MP3 et Ogg Vorbis ;
pour la vidéo : H.264, Ogg Theora et WebM.
Aucun format n'est reconnu par l'ensemble des navigateurs : il faut proposer différentes versions de sa musique ou de sa vidéo pour satisfaire tous les navigateurs.
Il faut ajouter l'attribut controls aux balises <audio> et TODO pour permettre au visiteur de lancer ou d'arrêter le média.
Ces balises ne sont pas conçues pour empêcher le téléchargement de la musique et de la vidéo. Vous ne pouvez pas protéger votre média contre la copie.
N'est-il pas possible de protéger les fichiers audio et vidéo en se servant de PHP ?
En faisant un script php qui associe un identifiant de vidéo au fichier vidéo concerné, et qui quand il est appelé charge et affiche le contenu en modifiant les headers de manière adéquate. Un peu comme les images générées avec GD en somme.
Couplé à un .htaccess dans le dossier contenant les vidéos et les fichiers audio, plus à des permissions bien faites au niveau des dossiers et des fichiers, on obtient un système suffisamment sécurisé non (par suffisamment, c'est-à-dire qu'en dehors des enregistrements à la audacity ou fraps, y a pas vraiment moyen de télécharger le fichier directement) ?
Je vois pas vraiment pourquoi ça ne marcherait pas, donc ça vaudrait peut être le coup d'en parler, même si c'est assez loin du cours, parce que ça permettrait surement de calmer les peurs de bons nombres de gens qui ont pas envie que leurs productions audio et/ou vidéos se retrouvent n'importe où sur le web, et donc de populariser un peu plus l'utilisation de ces balises.
J'ai suivi pas à pas le tuto, j'ai converti ma video...
quand je veux l'afficher sur mon site j'ai le message suivant : "le format vidéo ou le type MIME n'est pas géré.
Serait il possible d'avoir de l'aide ?
merci beaucoup !
Rien de sert de partir à point, il suffit de courir vite !
La phrase de fin "nous ne devrions plus utiliser Flash pour nos vidéos !"
Je dirais même : Nous ne devrions JAMAIS utiliser Flash.
Flash n'est pas une technologie faite pour le Web. Préférer les nouvelles fonctions de HTML5
Bonjour, et merci pour ce tuto !
J'ai eu ce problème aussi avec firefox :
"aucune video dont le format ou le type mime est géré n'a été trouvée"
Et ce en ayant les trois type de vidéo proposés ".mp4" ".ogv" et ".webm".
En fait il faut changer l'extension ".ogv" en ".ogg"
Je l'ai fait sur le code html et sur le nom de la video elle même, et maintenant tout fonctionne !
Voilà si ça peut aider!
Le tuto m'a l'air très bien, mais j'ai juste une question, j'aimerais simplement savoir si on pouvait régler le volume par défaut pour l'audio, j'ai essayé de mettre une musique sur mon site, mais elle est vraiment trop forte de base
Citation : Un inconnu
Ten years ago, we had Steve Jobs, Johnny Cash and Bob Hope.
Now, we have no job, no cash and no hope.
La vidéo et l'audio
A-spec59
tanguyGerome
Trouvez une formation
Suggestions
Flux RSS News
Facebook
Google+