Canvas Based Image Sequence Player With jQuery - imgplay

imgplay is a jQuery & Html5 canvas based image player/viewer plugin which allows to view a sequence of images with play/pause/stop/forward/backward/fullscreen controls, similar to the video or audio player.

How to use it:

1. Add the required CSS styles inside the header of your webpage. The plugin currently uses Material Icons for player icons.

<link href="imgplay/jquery.imgplay.css" rel="stylesheet">
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2. Add a group of images into the player using either src or data-src attributes.

<div id="imageplayer" class="imageplayer">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  <img data-src="4.jpg">
  <img data-src="5.jpg">
  <img data-src="6.jpg">
</div>

3. Add the necessary JavaScript files to the bottom of the webpage.

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="imgplay/jquery.imgplay.js"></script>

4. Initialize the image player on document ready.

$('#imageplayer').imgplay();

5. Default customization options.

$('#imageplayer').imgplay({

  // name of the image player
  name: 'imgplay',

  // max rate is 100 fps and min rate is 0.001 fps
  rate: 1,

  // displays controls
  controls: true
  
});

Change log:

2016-07-25

• Active button colors added.

2016-03-24

• Code quality fixed with eslint. Minified for production use.

---

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