Alexandre LACOUR - Informatique et Formation

La balise video de l’HTML5 est vraiment très pratique. Malheureusement, l’attribut preload n’est pas encore respecté par les navigateurs actuels.

J’ai pu effectué une petite astuce en utilisant les canvas, mais qui est à améliorer pour IE9, j’expliquerai pourquoi par la suite.

D’après la norme w3c, il nous suffit d’écrire pour afficher une vidéo :

<video src="mavideo.mp4" type="video/mp4" controls preload="metadata">
  fallback video
</video>

Bien évidemment, il faut penser à mettre des lignes différentes pour les différentes sources suivant les navigateurs. La vidéo se charge bien, mais le preload des metadata uniquement ne se fait pas. C’est ici qu’entre en scène « l’astuce » du canvas :

<video src="mavideo.mp4" type="video/mp4" controls preload="metadata">
  fallback video
</video>
<canvas id="canvas01" width="100" height="100">
  fallback canvas
</canvas>

Jusque là rien d’exceptionnel, mais nous pouvons rajouter l’ajout de petite fonction à un évènement :

<video onLoadMetadata="document.getElementById('canvas01').getContext('2d').drawImage(this,0,0,100,100); this.src=null;" src="mavideo.mp4" type="video/mp4" controls preload="metadata">
  fallback video
</video>
<canvas id="canvas01" width="100" height="100">
  fallback canvas
</canvas>

A partir de ce moment, la vidéo, une fois les méta données chargées, va se dessiner dans le canvas et décharger sa source. On peut alors appliquer un display none à la video, cela marchera très bien.

Léger problème, le canvas, sous IE9, ne se dessine pas correctement. Si l’on insère un alert avant le drawImage, ou par exemple à l’action de la souris, le dessin apparait.

C’est un début de piste pour tout ceux qui ne souhaitent pas attendre les correctifs des navigateurs web.