La balise video de HTML permet de lire directement une vidéo dans le navigateur. Une autre possibilité que propose HTML5 est de lire une vidéo dans un <canvas>. Cela peut avoir plusieurs avantages : modification de l’affichage (taille, découpe, etc…), ajout d’informations en surimpression de la vidéo, de filtres de couleurs, lecture de plusieurs vidéo dans une seule balise <canvas>, etc…
C’est ce que nous allons voir dans ce tutoriel. La première étape va être de définir le code HTML et CSS de base :
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 100%;
width: 100%;
}
#color {
width: 80px;
}
#opacity {
width: 30px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<canvas width="600" height="320" id="video">
Votre navigateur ne supporte pas la balise canvas
</canvas>
<div id="bar">
<input type="checkbox" id="filter" /> Filtre : <input type="text" value="255, 0, 0" id="color_filter" /> (opacity : <input type="text" value="0.3" id="opacity_filter" />)<br />
<input type="checkbox" id="bruit" /> Bruit : <input type="text" value="0, 0, 0" id="color_bruit" /> (opacity : <input type="text" value="0.7" id="opacity_bruit" />)
</div>
</body>
</html>
On a donc uniquement une balise canvas qui va servir à lire notre vidéo puis un div où on va définir 2 options de surimpression pour la vidéo : un filtre de couleur et du bruit.
Maintenant nous allons instancier un élément <video> et la lire :
var video = document.createElement('video');
video.width = 600; video.height = 320;
$(video).html('<source src="../video_HTML5/video.webm" type="video/webm" /><source src="../video_HTML5/video.mp4" type="video/mp4" />');
video.volume = 0;
video.play();
On définit donc la vidéo avec sa taille et 2 sources pour être compatible avec la plupart des navigateurs (webm et mp4). Ensuite on rend la vidéo muette en mettant le volume a 0 et on lance la lecture. A ce stade notre vidéo n’est pas affiché puisque notre élément video n’est pas intégré à la page. Ce que nous voulons c’est que la lecture s’affiche dans le canvas donc :
var ctx = $('#video')[0].getContext('2d');
setInterval(video_to_canvas, 30);
function video_to_canvas()
{
ctx.drawImage(video, 0, 0, video.width, video.height);
}
On récupère le context du canvas pour dessiner dedans et on défini un appel à la fonction video_to_canvas toutes les 30 millisecondes.
Cette fonction va dessiner l’image courante de la vidéo dans la canvas.
Ajoutons maintenant les 2 fonctionnalités donc nous avons parlé tout à l’heure : un filtre de couleur et du bruit . Nous avons défini ce code HTML tout à l’heure :
<div id="bar"> <input type="checkbox" id="filter" /> Filter : <input type="text" value="255, 0, 0" id="color_filter" /> (opacity : <input type="text" value="0.3" id="opacity_filter" />)<br /> <input type="checkbox" id="bruit" /> Bruit : <input type="text" value="0, 0, 0" id="color_bruit" /> (opacity : <input type="text" value="0.7" id="opacity_bruit" />) </div>
Nous avons pour chacune des fonctionnalités 3 champs : 1 case à cocher (fonction activée ou non), 2 champs texte (couleur et opacité). Modifions donc maintenant la fonction video_to_canvas de tout à l’heure pour prendre en compte ces champs et leurs valeurs :
function video_to_canvas()
{
ctx.drawImage(video, 0, 0, video.width, video.height);
if($('#filter:checked').length > 0)
{
ctx.fillStyle = 'rgba('+$('#color_filter').val()+', '+$('#opacity_filter').val()+')';
ctx.fillRect(0,0,video.width,video.height);
}
if($('#bruit:checked').length > 0)
{
for(var i=0; i<300; i++)
{
ctx.fillStyle = 'rgba('+$('#color_bruit').val()+', '+$('#opacity_bruit').val()+')';
ctx.fillRect(Math.random()*video.width,Math.random()*video.height,1,2);
}
}
}
- On dessine un rectangle de la couleur et de l’opacité choisis sur toutes la taille du canvas si le filtre est activé
- On ajoute 300 « petits points de bruit » de la couleur et de l’opacité choisis à des emplacement aléatoire dans le canvas
Voila c’est terminé pour ce tuto ! A vous maintenant d’imaginer d’autres fonctionnalités avec les possibilités offertes par HTML5…
Démonstration video et canvas HTML5 – Télécharger le ZIP du tutoriel