imgplay
v0.2.0
Published
Image sequence player with streaming and dynamic loading support.
Downloads
23
Maintainers
ntermsReadme
imgplay
Image sequence player jQuery plugin with streaming and dynamic loading.
Usage
Add styles inside <head> tag.
<link rel="stylesheet" href="path/to/imgplay/jquery.imgplay.css" />Add plugin at the bottom of the page after jQuery
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="path/to/imgplay/jquery.imgplay.min.js"></script>List the set of images inside a container <div> so that payer can
pick them and play.
<div id="imageplayer" class="imageplayer">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
<img src="image5.jpg" />
<img data-src="image6.jpg" />
<img data-src="image7.jpg" />
<img data-src="image8.jpg" />
<img data-src="image9.jpg" />
<img data-src="image10.jpg" />
</div>Notice that only from image1.jpg to image5.jpg are loaded when the
page is loaded and other images have data-src attribute instead of the
src attribute. This makes the player dynamically load these images
while it plays images till image5.jpg.
Now invoke the player.
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('#imageplayer').imgplay({rate: 2}); // start imgplay
});
})(jQuery);
</script>Options
Following options are currently available for configuring the plugin.
rate- Number of frames per second. Default is1.controls- Whether to show player controls. Default istrue.
Methods
Following methods can be called on the player object to programatically control it's behaviour.
play()- Play the image sequence.pause()- Pause the player.stop()- Stop the player.rewind(frames)- Jump number offramesbackward.forward(frames)- Jump number offramesforward.fastRewind(rate)- Play backword at givenrate.fastForward(rate)- Play forword at givenrate.previousFrame()- Pause and jump to the previous frame.nextFrame()- Pause and jump to the next frame.toFrame(i)- Jump to the frame numberi.fullscreen()- Toggle fullscreen mode.
All the methods are simply callable through the data property of the container
element after initialisation.
$('#imageplayer').data('imgplay').play();Contribute
- If you think the idea of imgplay is intersting just let me know That surely will be a push forward.
- If you find a bug or a way we can improve imgplay, just open a new issue.
- If you have fixed something or added new feature, just send a pull request.
License
MIT License. Please see LICENSE for license details.