Tutoriel vidéo et HTML5
28 September 2012 par durand_yLa vidéo sur internet s’est beaucoup développée ces dernières années, avec l’explosion des réseaux sociaux et autres sites spécialisés dans le streaming (youtube, dailymotion).
L'arrivée d'HTML5 révolutionne le monde du web et plus particulièrement celui de la vidéo et de l'audio. Vous allez découvrir les possibilités offertes par cette nouvelle technologie, et plus particulièrement la balise vidéo dans HTML5.
La vidéo à l'ancienne
Avant pour lire une vidéo il fallait obligatoirement installer le plugin Adobe Flash, ou en installant d'autre plugin tel que Quick Time Player, qui nécessite que Quick Time soit installé sur la machine de l'utilisateur ce qui n'est pas forcément pratique, ou encore en utilisant d'autre lecteur media. Un bon aperçu des manières de procéder sur trouve sur le site du zéro.
Le code nécessitait l'utilisation de la balise embed pour utilisé le lecteur en adéquation avec le fichier à lire, puisque les lecteurs ne prenaient pas en charge le même format vidéo.
La balise vidéo
Les formats
La spécification sur les formats de vidéo standards n'étant toujours pas précisée, faute d'accord sur la technologie à utiliser, il faut donc se tourner vers les formats que les navigateurs gèrent nativement. La difficulté est là, car ils ne supportent pas tous les mêmes formats donc il est fortement probable que votre vidéo soit lue sur Firefox et pas sur internet explorer. Les formats supportés par les principaux navigateurs sont : Le MP4/h.264, le Ogg/Theora, WebM/vp8. Je vous conseille fortement de vous munir d'un convertisseur tel que Miro Video Converter pour pouvoir gérer les problèmes de compatibilité. Ci-dessous un récapitulatif des formats gérés par les navigateurs du marché.
Internet Explorer 9+ : Le mp4, le WebM mais il est nécéssaire d'installer les codecs au préalable.
Mozilla Firefox 4+ : Le Ogg et le WebM.
Google Chrome 6+ : Le Ogg et le WebM.
Opéra : Le Ogg et le WebM.
Safari: Le mp4.
Insérer une vidéo dans une page web
Contrairement aux précédentes manières d'insérer une vidéo. En HTML5 c'est assez simple si on veut juste un lecteur basique. Dans l'exemple suivant on va insérer une vidéo dans une page:
<video controls src="VIDEO/Metallica with Big 4 jam - Overkill.mp4">Description alternative de la vidéo</video>
Vous aurez compris que l'attribut src indique le chemin jusqu'à la vidéo. Pour l'attribut controls on y reviendra après quand on verra plus en détails les attributs de la balise.
Dans cet exemple on peut voir que le format envoyé au navigateur est le mp4, et qu'au vu du récapitulatif juste au-dessus peu de navigateurs le supportent. D'où l'intérêt de posséder un logiciel comme Miro Video Converter qui peut convertir dans les autres formats supportés. Il est aussi possible de lire une vidéo provenant d'un site comme youtube ou autre.
<video controls> <object type="application/x-shockwave-flash" width="425" height="355" data="http://www.youtube.com/watch?v=0U4r2_s59qk"> <param name="movie" value="http://www.youtube.com/watch?v=0U4r2_s59qk" /> <param name="wmode" value="transparent" /> </object>
Dans la partie suivante on verra comment gérer efficacement plusieurs vidéos.
Le multi source
Comment faire du multi source ?
Il n'est pas nécessaire de mettre une balise vidéo par format puisque le fait d'ajouter une balise vidéo va automatiquement insérer un nouveau lecteur. Donc vous obtiendrez une page avec trois lecteurs vidéo mais, comme aucun des navigateurs ne supporte les trois formats, vous vous retrouverez avec des espaces vides ou affichant une erreur de format.
La bonne méthode consiste à laisser choisir au navigateur le format qu'il peut afficher.
Il suffit de rajouter la balise source dans la balise vidéo. Comme un exemple vaut mieux qu'un long discours:
<video controls > <source src="VIDEO/Metallica with Big 4 jam - Overkill.mp4"/> <source src="VIDEO/Metallica with Big 4 jam - Overkill.theora.ogv"/> <source src="VIDEO/Metallica with Big 4 jam - Overkill.webmvp8.webm"/> the big 4 jam </video>
Voilà un exemple de code qui fonctionnera sur tous les navigateurs du marché.
Les différent attributs
Comme promis on arrive à une partie très intéressante et sensible, la définition des différents attributs de la balise vidéo qui vous permettront de mieux gérer votre affichage.
L'attribut controls permet d'afficher la barre de lecture, il suffit de mettre l'attribut controls dans la balise pour que la barre s'affiche. Si vous ne la voulez pas ne mettez pas l'attribut.
Les attributs width et height permette de définir la taille de l'image/lecteur vidéo tel que vous voulez qu'elle apparaisse. Toutefois prenez garde à la résolution de la vidéo, si vous l'affichez trop grand et que la résolution est de mauvaise qualité, vous aurez une vidéo médiocre et avec un taux de pixellisation assez important.
L'attribut autoplay="true" permet de charger et de lancer automatiquement la vidéo dès que la page est chargée. Mais prenez garde à son utilisation dans le cas où l'utilisateur possède une faible bande passante car cela peut incommoder les utilisateurs.
L'attribut autobuffer (Firefox 3.5 et 3.6) ou preload="true" ont la même fonction : charger en background la vidéo le temps que la page de votre site se charge. Comme avec autoplay faîtes attention avec l'utilisation de ces options. Il est préférable d'utiliser ces attributs quand vous êtes sûr que la vidéo sera visionnée dans tous les cas sinon vous consommerez de la bande passante inutilement.
L'attribut poster="chemin vers une image" affiche une image dans l'espace de la vidéo en attendant que la vidéo soit disponible à la lecture.
L'attribut loop="true" indique que la vidéo est jouée en boucle.
On peut retrouver aussi l'attribut type="type de vidéo" qui sert à spécifier le type MIME de la vidéo.
Un exemple un peu plus complet:
<video controls width="800" height="600" autoplay="true"> <source src="VIDEO/Metallica with Big 4 jam - Overkill.mp4" type="video/mp4"/> <source src="VIDEO/Metallica with Big 4 jam - Overkill.webmvp8.webm" type="video/webm"/> <source src="VIDEO/Metallica with Big 4 jam - Overkill.theora.ogv" type="video/ogg"/> the big 4 jam </video>
Il est conseillé de mettre dans un .htacces les lignes suivantes.
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Les effets CSS et JavaScript
Au même titre que toutes les autres balises du HTML5 la balise vidéo est stylisable avec CSS3. Vous pouvez ajouter des bordures arrondies, des ombres, centrer votre vidéo, etc. Toutes les options que vous souhaitez pour rendre votre vidéo plus agréable à regarder. Un élément encore plus intéressant est l'interaction apportée par le JavaScript et l’élément canvas. Vous pouvez par exemple afficher la vidéo dans un élément canvas, pour pouvoir interagir avec par la suite. Ou changer les couleurs de la vidéo, ou comme l'exemple trouvé ici ou en cliquant vous faites exploser la vidéo. Il y a beaucoup d'exemples sur les possibilités offertes par le mélange entre le canvas, la vidéo et le JavaScript.
Un exemple qui permet d'avoir une page présentable pour un site web avec du CSS et des images.
Code HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="testvideo.css"> <meta name="description" content="" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> </head> <body> <header> <img src="Image/Metallica.jpg" alt="Metallica"> </header> <section> <video controls width="800" height="600" autoplay="true"> <source src="VIDEO/Metallica with Big 4 jam - Overkill.mp4" type="video/mp4"/> <source src="VIDEO/Metallica with Big 4 jam - Overkill.webmvp8.webm" type="video/webm"/> <source src="VIDEO/Metallica with Big 4 jam - Overkill.theora.ogv" type="video/ogg"/> the big 4 jam </video> </section> </body> </html>
Code Css :
body { background-image: url("Image/background.jpg"); } img { position: absolute; left: 20%; } video { border: inset; border-color: white; border-radius: 30px 30px 30px 30px; margin-top: 10%; margin-left: 26%; }
Exemple de modification de vidéo avec le canvas
Nous allons voir maintenant la manière de procéder pour charger une vidéo dans un élément canvas. Cette opération est très utile car une fois la vidéo chargée il très simple d'accéder aux pixels et de modifier leurs propriétés. Dans l'exemple on va donc charger la vidéo dans un canvas à côté de la vidéo originale, et dans le canvas la vidéo aura les couleurs inversées. On peut assimiler l'opération au filtre inversion de couleur disponible sur Photoshop ou d'autres logiciels du genre.
Le code HTML :
<video id="v" controls> <source src="VIDEO/South Park - Tenacious D - Kickapoo.mp4video.mp4" type="video/mp4"/> <source src="VIDEO/South Park - Tenacious D - Kickapoo.webmvp8.webm" type="video/webm"/> <source src="VIDEO/South Park - Tenacious D - Kickapoo.theora.ogv" type="video/ogg"/> the big 4 jam </video> <canvas id="c"></canvas>
Comme d'habitude on gère les trois type de vidéos et on rajoute la balise canvas pour pouvoir charger notre vidéo dans le canvas.
Code CSS:
#c { position: absolute; top: 50%; left: 50%; margin: -180px 0 0 20px; } #v { position: absolute; top: 50%; left: 50%; margin: -180px 0 0 -500px; }
Dans le CSS on se contente de placer la vidéo et le canvas l'un à côté de l'autre. Pour avoir la comparaison directe entre les deux vidéos. Maintenant passons au gros morceau le JavaScript.
Code JavaScript :
document.addEventListener('DOMContentLoaded', function(){ var v = document.getElementById('v'); var canvas = document.getElementById('c'); var context = canvas.getContext('2d'); var back = document.createElement('canvas'); var backcontext = back.getContext('2d'); var cw,ch; v.addEventListener('play', function(){ cw = v.clientWidth; ch = v.clientHeight; canvas.width = cw; canvas.height = ch; back.width = cw; back.height = ch; draw(v,context,backcontext,cw,ch); },false); },false); function draw(v,c,bc,w,h) { if(v.paused || v.ended) return false; bc.drawImage(v,0,0,w,h); var idata = bc.getImageData(0,0,w,h); var data = idata.data; for(var i = 0; i < data.length; i+=4) { var r = data[i]; var g = data[i+1]; var b = data[i+2]; data[i] = 255 - r; data[i+1] = 255 - g; data[i+2] = 255 - b; } idata.data = data; c.putImageData(idata,0,0); setTimeout(function(){ draw(v,c,bc,w,h); }, 0); }
A première vue, le code a l'air un peu imbuvable, mais ne vous inquiétez pas on va expliquer ce qu'il se passe dans toutes ces lignes et l'importance de chaque ligne.
Tout d'abord commençons par expliquer le début avec la première fonction.
document.addEventListener('DOMContentLoaded', function(){ var v = document.getElementById('v'); var canvas = document.getElementById('c'); var context = canvas.getContext('2d'); var back = document.createElement('canvas'); var backcontext = back.getContext('2d');
On ajoute un listener sur le document, il est lancé quand le document est chargé. On récupère la vidéo dans v, et le canvas dans canvas. On récupère les contextes pour pouvoir dessiner simplement les deux canvas.
Ici on utilise deux canvas. Un qui servira à effectuer les opérations (back) avant de les afficher sur le canvas.
v.addEventListener('play', function(){ cw = v.clientWidth; ch = v.clientHeight; canvas.width = cw; canvas.height = ch; back.width = cw; back.height = ch; draw(v,context,backcontext,cw,ch); },false);
Dans cette partie rien de bien compliqué : on récupère au moment où on lance la vidéo la largeur et la hauteur de la vidéo pour donner à nos deux canvas la même taille que la vidéo. Puis on appelle la fonction qui est chargée du traitement sur l'image. Avec en paramètre la vidéo, les deux canvas et les largeurs et hauteurs des éléments.
Passons maintenant à la fonction qui fait le traitement de filtre.
function draw(v,c,bc,w,h) { if(v.paused || v.ended) return false; bc.drawImage(v,0,0,w,h);
On vérifie l'état de la lecture (pause ou arrivé en fin de lecture). Pour dessiner sur le canvas de fond l'image à l'arrêt.
var idata = bc.getImageData(0,0,w,h); var data = idata.data; for(var i = 0; i < data.length; i+=4) { var r = data[i]; var g = data[i+1]; var b = data[i+2]; data[i] = 255 - r; data[i+1] = 255 - g; data[i+2] = 255 - b; } idata.data = data; c.putImageData(idata,0,0); setTimeout(function(){ draw(v,c,bc,w,h); }, 0);
Ici dans idata on récupère sous forme de tableau de pixel l'image affichée. Comme vous le savez un pixel est composé de 4 composantes, 3 de couleur (rouge, vert, bleu) et d'une composante de transparence alpha.
Dans l'objet idata que nous récupérons il y a un champ data qui est un canvaspixelarray, autrement dit c'est un tableau qui contient chaque composante de chaque pixel. On va donc parcourir ce tableau en avançant de quatre à chaque tour de boucle pour se retrouver sur la première composante du pixel suivant. On récupère dans les variables les valeurs des composantes. En suivant le principe de l'inversion de couleur on enlève la valeur de chaque composante à 255. Une fois que toutes les composantes ont été recalculées on remet le tableau changé dans l'objet idata. Puis on dessine sur le canvas principal la nouvelle image.
Conclusion
À travers ce tutoriel on a pu voir les nouveautés qu'apporte la balise vidéo dans HTML5. La facilité d'insérer des vidéos personnelles ainsi que celles venues d'autres sites. Combiné à la balise canvas et en réfléchissant un peu, on peut faire des choses tout à fait extraordinaires. En bref la vidéo et le canvas vont sûrement être source de beaucoup de très bonnes applications.