Vidéo en gif

Vidéo en gif

J'ai déjà proposé ICI, un article sur une façon de publier une très courte vidéo (1 à 2 secondes), directement sur votre page, sans avoir à l'héberger sur un site de vidéos et de transformer cette vidéo en image animée au format gif.

Une fidèle visiteuse, d'outre atlantique: Loneci est devenue experte dans ce type de montage.

Dans les exemples qui vont suivre, mes vidéos de 1 seconde font 4Mo, au format Mov; la conversion en ligne (ici, par exemple), en modifie le format au format gif mais toujours pour un poids similaire, en taille 690x388px.

Comme pour une image classique, on peut lui appliquer des décorations.

Tout d'abord, pour reprendre l'aspect conversion: mon appareil photo sort les vidéos au format mov mais on peut trouver d'autres formats de sorties, sur d'autres appareils; le site de conversion les reconnaît.

Dans la colonne de gauche, choisir: "convertisseur d'images/convertir en gif".

Choisir le fichier dans vos dossiers; ne pas modifier la taille, pour ne pas se compliquer la tâche; en amélioration, attention de ne pas trop cliquer sur la première ligne des choix, qui modifient l'aspect de votre image: vous aurez le loisir d'y revenir, si cela vous tente !

Clic sur "Convertir le fichier" et attendre le transfert automatique ou cliquer sur le lien de téléchargement, si cela coince !

J'ai converti et hébergé 3 vidéos, récupéré leurs adresses URL; la première sera publiée avec une bordure blanche, un arrondi et une ombre.

<p style="width: 690px; height: 388px;"><img style="width: 690px; height: 388px; border: 4px solid white; border-radius: 150px; box-shadow: 4px 4px 8px black;" src="http://ekladata.com/gNTQrOPjyyMBxSUgQADO7TdfQPA/DSCN6127.gif" alt="" /></p>

<div style="float: left; width: 690px; height: 390px; margin: 10px 20px 10px 0;">
<p style="position: absolute; z-index: 1; transform: translate(0px,0px);"><img style="width: 690px; height: 388px; border: 4px solid white; box-shadow: 4px 4px 8px black; filter: grayscale(1); -webkit-filter: grayscale(1);" src="http://ekladata.com/hfsKic5wZLde8AN_thOTYrL6rKo/DSCN6182.gif" alt="" /></p>
<p style="position: absolute; z-index: 2; width: 500px; height: 290px; border: 3px double white; border-radius: 50%; transform: translate(97px,47px); box-shadow: inset -4px -4px 6px 2px black, inset 4px 4px 6px 2px white; background: url('http://ekladata.com/hfsKic5wZLde8AN_thOTYrL6rKo/DSCN6182.gif'); background-position: center center;"> </p>
</div>

Et pour s'amuser, une animation qui s'arrête au survol de l'image de fond.
<div style="float: left; width: 690px; height: 390px; margin: 10px 20px 10px 0;">
<p id="ay" style="position: absolute; z-index: 1; transform: translate(0px,0px);"><img style="width: 690px; height: 388px; border: 4px solid white; box-shadow: 4px 4px 8px black; filter: grayscale(1); -webkit-filter: grayscale(1); opacity: 0.5;" src="http://ekladata.com/7NwIAUf90viJ1LOFrNl79jplnG8/DSCN6192.gif" alt="" /></p>
<p id="sele" style="position: absolute; z-index: 2; width: 290px; height: 192px; border: 3px solid white; transform: translate(3px,3px); background: url('http://ekladata.com/7NwIAUf90viJ1LOFrNl79jplnG8/DSCN6192.gif'); background-position: 0px 0px;"> </p>
</div>
<style type="text/css"></style>
...