Prenons l'exemple de la vidéo Comprendre le codage à l'école du Réseau Canopé qui a été déposée dans la Médiathèque.
La première image est un fond vert, ce qui n'est pas très représentatif de cette vidéo.
Nous allons remplacer cette image par une image déposée dans la Médiathèque.
On pourra utiliser l'outil Capture d'écran du logiciel VLC pour obtenir cette image.
En basculant vers le mode Source, on obtient le code HTML suivant :
<div style="margin: 0 auto; display: table;">
<video controls="" height="225" preload="auto" width="400"><source src="http://blog.ac-versailles.fr/blogetmedias/public/videos/Comprendre_le_codage_a_l_ecole.mp4" /><object data="http://blog.ac-versailles.fr/blogetmedias/index.php/?pf=player_flv.swf" height="225" type="application/x-shockwave-flash" width="400"><param name="movie" value="http://blog.ac-versailles.fr/blogetmedias/index.php/?pf=player_flv.swf" /><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" /><param name="FlashVars" value="title=Comprendre%20le%20codage%20%C3%A0%20l'%C3%A9cole.mp4&amp;margin=1&showvolume=1&showtime=1&showfullscreen=1&buttonovercolor=ff9900&slidercolor1=cccccc&slidercolor2=999999&sliderovercolor=0066cc&flv=http://blog.ac-versailles.fr/blogetmedias/public/videos/Comprendre_le_codage_a_l_ecole.mp4&width=400&height=225" />Lecteur vidéo intégré</object></video>
</div>
Ajouter l'attribut poster en indiquant l'URL de l'image et modifier la valeur de l'attribut preload comme indiqué ci-dessous :
<div style="margin: 0 auto; display: table;">
<video controls="" height="225" poster="http://blog.ac-versailles.fr/blogetmedias/public/videos/codage.png" preload="none" width="400"><source src="http://blog.ac-versailles.fr/blogetmedias/public/videos/Comprendre_le_codage_a_l_ecole.mp4" /><object data="http://blog.ac-versailles.fr/blogetmedias/index.php/?pf=player_flv.swf" height="225" type="application/x-shockwave-flash" width="400"><param name="movie" value="http://blog.ac-versailles.fr/blogetmedias/index.php/?pf=player_flv.swf" /><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" /><param name="FlashVars" value="title=Comprendre%20le%20codage%20%C3%A0%20l'%C3%A9cole.mp4&amp;margin=1&showvolume=1&showtime=1&showfullscreen=1&buttonovercolor=ff9900&slidercolor1=cccccc&slidercolor2=999999&sliderovercolor=0066cc&flv=http://blog.ac-versailles.fr/blogetmedias/public/videos/Comprendre_le_codage_a_l_ecole.mp4&width=400&height=225" />Lecteur vidéo intégré</object></video>
</div>
On obtient le résultat suivant :
Remarque
Il est en général inutile d'effectuer cette manipulation avec les vidéos insérées au moyen d'un code iframe.
