imgplay-jQuery plug-in for canvas-based image sequence playback

Brief Tutorial

imgplay is a jQuery plug-in for image sequence playback based on HTML5 canvas. Through this plug-in, a group of pictures can be played in turn. You can also pause, fast forward, and rewind, and enter full-screen mode for picture viewing.

How to use

Using this plug-in requires introducing jquery.imgplay.css and jQuery and jquery.imgplay.js files into the page.

<link rel="stylesheet" type="text/css" href="css/jquery.imgplay.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgplay.js"></script>

HTML structure

The HTML structure of the image player plug-in is very simple: use a dc6dce4a544fdca2df29d5ac0ea9906b container to wrap a group of image elements. Images can use the src attribute or the data-src attribute.

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

Initialization plug-in

After the page DOM element is loaded, the image playback plug-in can be initialized through the imgplay() method.

$(document).ready(function(){
   $('#imageplayer').imgplay();
});

Configuration parameters

The image player plug-in has 3 configuration parameters:

• ##name: the name of the image player, the default is: "imgplay ".

• #rate: The frequency of picture playback. The larger the value, the faster it will be played. The maximum value is 100 and the minimum value is 0.001.

• controls: Whether to display control buttons.

The above is the content of imgplay-canvas-based image sequence playback jQuery plug-in. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!