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

File Size: 213 KB
Views Total: 6007
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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. 


  • 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.


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

<img class="gifplayer" 

5. Set the trigger event.

<img class="gifplayer" 

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


  // 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.


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

8. API methods:

// play 

// stop

Change log:


  • Fixed Preload bug in jQuery 3+.


  • Add onClick event


  • Add var declaration for scope


  • module support

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