Need help with gifplayer?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

rubentd
456 Stars 80 Forks MIT License 72 Commits 21 Opened issues

Description

Customizable jquery plugin to play and stop animated gifs. Similar to 9gag's. Support for video formats

Services available

!
?

Need anything else?

Contributors list

# 221,515
HTML
CSS
Shell
covid19
52 commits
# 399,253
JavaScr...
CSS
7 commits
# 105,903
PHP
Laravel
blade
Shell
2 commits
# 357,011
JavaScr...
CSS
React
Termina...
1 commit
# 73,556
PHP
GraphQL
laravel...
laravel...
1 commit
# 11,225
watchos
vue-cli
vuejs2
qrcode-...
1 commit

gifplayer

Bower version

Customizable jquery plugin to play and stop animated gifs. Similar to 9gag's. New: Video support (webm, mp4)

Basic Usage

  1. Add a preview of the gif or video file to your website
  2. Specify a ‘data-src’ attribute with the path to the animated gif or video, or simply have an image with the same name and the .gif extension in the same folder of the ‘preview’ image
  3. Include jquery.js, jquery.gifplayer.js and gifplayer.css on your site
  4. Call the .gifplayer() method for the desired images



Options

Options can be setup in two ways:

  1. Setup as an object when initializing the plugin:
$('.banana').gifplayer({ label: 'play' });
  1. Setup as data attributes in the preview image:

Option |Values |Default | Allowed values --- | --- | --- | --- label | A value for the label in the circle over the image |‘gif’ | playOn | Event that triggers playing the animated gif |'click' | 'click', 'hover' mode | Load an animated gif file or a video | 'gif' | 'gif', 'video' gif | Source for the gif file | Default option is the same name of the preview imagem replacing extension to .gif | mp4 | Source for the mp4 video file (video mode)| Default option is the same name of the preview imagem replacing extension to .mp4 | webm | Source for the webm video file (video mode)| Default option is the same name of the preview imagem replacing extension to .webm | wait | Would you wait until the animation file has been fully loaded to play, or start playing right away | false | true, false

Methods (beta)

Use these methods to play and stop the player programatically

$('#banana').gifplayer('play');
$('#banana').gifplayer('stop');

Events (beta)

Use events to do awesome things

$('#banana').gifplayer({
    onPlay: function(){
        console.log('GIF started',this);
    },
    onStop: function(){
        console.log('GIF stopped',this);
    },
});

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.