Canvas Based Image Sequence Player With jQuery - imgplay

Canvas Based Image Sequence Player With jQuery - imgplay
File Size: 14.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.