Image sequence player jQuery plugin with streaming and dynamic loading.
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>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.
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();- 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.
MIT License. Please see LICENSE for license details.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent