jQuery Plugin To Play Animated GIF Just Like A Video - Gifplayer

A highly customizable jQuery gif player plugin which allows to play / stop animated GIF files (and even HTML5 videos) on hover or click event. 

Features:

• Replaces the preview image with GIF or video file when triggered.
• Allows to delay the playing until your large GIF is completely loaded.

How to use it:

1. Load the necessary jQuery library and the jQuery Gifplayer plugin's files in your html document.

<link rel="stylesheet" href="gifplayer.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.gifplayer.js"></script>

2. Insert the preview image of your GIF into the webpage as follow. Note that the GIF file must be placed in the same folder as this: /media/1.jpg, /media/1.gif.

<img class="gifplayer" src="media/1.png">

3. Initialize the gif player with default options. That't it.

$('.gifplayer').gifplayer();

4. If you'd like to use the 'Video' mode:

<img class="gifplayer" 
     src="media/1.png"
     data-mode="video"
     data-webm="media/1.webm"
     data-mp4="media/1.mp4">

5. Set the trigger event.

<img class="gifplayer" 
     src="media/1.png"
     data-playon="hover"
     >

6. All configuration options which can be passed via HTML5 data attributes or as a JavaScript object to the gifplayer() method.

$('.gifplayer').gifplayer({

  // lable text
  label: 'GIF',

  // or 'hiver'
  playOn: 'click',

  // or video
  mode: 'gif',

  // alternative gif
  gif: '',

  // path to video files
  mp4: '',
  webm: '',

  // lazy load mode
  wait: false,

  // scope mode
  scope: false
  
});

7. Callback functions.

$('.gifplayer').gifplayer({

  onPlay: function(){},
  onStop: function(){},
  onClick: function(){},
  onLoad: function(){},
  onLoadComplete: function(){}
  
});

8. API methods:

// play 
$('.gifplayer').gifplayer('play');

// stop
$('.gifplayer').gifplayer('stop');

Changelog:

2025-03-30

• v0.3.7

2025-03-29

• JS updated

2017-02-20

• Fixed Preload bug in jQuery 3+.

2017-02-19

• Add onClick event

2017-07-09

• Add var declaration for scope

2017-02-01

• module support

---

This awesome jQuery plugin is developed by rubentd. For more Advanced Usages, please check the demo page or visit the official website.