TUTOS.EU

Relancer la lecture d'un gif

On va voir ici comment relancer une lecture d'un gif animé.
En prérequis, ce dernier ne doit donc pas s'exécuter en boucle. Il doit se jouer nombre limité de fois, comme 1 fois.
Pour faire cela, comme montré dans l'article 3782, quand on crée le gif avec ffmpeg, on utilise l'option -loop -1

 

Ensuite, pour relancer la lecture du gif, la technique ici utilisée consiste à réinjecter l'emplacement du gif dans la balise img avec du jquery.

Dans l'exemple ci-dessous, on a 2 balise img qui jouent chacune un gif. Elles portent l'id gifTest1 et gifTest2.

 

 

<img id="gifTest1" class="gifArticle" src="LeGif01.gif"><br />
<img id="gifTest2" class="gifArticle" src="LeGif02.gif"><br />
Lien vers le fichier : cliquez ici

De là le code jquery attend que l'on click dessus. Pour cela il regarde si un clic a lieu sur toutes les balises img qui portent le nom gifTest

$( "img[id*='gifTest']" ).click(function() {
Lien vers le fichier : cliquez ici

Quand le click arrive, on récupère l'emplacement du gif avec $(this).attr('src')

et on le réinjecte dedans avec $(this).attr('src', 'l emplacement du gif');

$(this).attr('src', $(this).attr('src'));
Lien vers le fichier : cliquez ici
<!DOCTYPE html>
<HTML lang="fr">
	<HEAD>
		<meta charset="utf-8" />

		<link href="style.css" rel="stylesheet" />
		
		<!-- Pour que l'affichage s'adapte bien sur les smartphones -->
		<!-- https://www.alsacreations.com/astuce/lire/1177-Une-feuille-de-styles-de-base-pour-le-Web-mobile.html -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<script src="https://code.jquery.com/jquery.js" type="text/javascript"></script>

	</HEAD>
	<BODY>
		
		<img id="gifTest1" class="gifArticle" src="LeGif01.gif"><br />
		<img id="gifTest2" class="gifArticle" src="LeGif02.gif"><br />

		<SCRIPT TYPE="text/javascript">

			$(function() {

				$( "img[id*='gifTest']" ).click(function() {
					console.log( $(this).attr('id') );
					console.log( $(this).attr('class') );
					console.log( $(this).attr('src') );
					$(this).attr('src', $(this).attr('src'));
				} );				

			});	

		</script>		
		
	</BODY>
</HTML>
Lien vers le fichier : cliquez ici

Article(s) précédent(s)