Image Sequence Player In JavaScript – img-player

img-player is a lightweight JavaScript library that transforms an array of images into an interactive image player.

It allows you to play a sequence of image sequences with controls like Play, Pause, Stop, etc.

Perfect for creating image viewers, presentations, slideshows, or any other scenario where you want to bring a series of images to life.

How to use it:

1. Install & import the ‘@khopha/img-player’ with NPM:

npm i @khopha/img-player

import { imgPlayer } from '@khopha/img-player';

2. Create a container for the image player in your HTML:

<div id="image-player"></div>

3. Initialize img-player and specify the image sources:

const element = document.getElementById('image-player');
const player = imgPlayer(element, {
  srcList: [
    '/path/to/image/1.jpg',
    '/path/to/image/2.jpg',
    // ... more image here
  ]
})

4. Manage playback using the following API methods:

// Play
player.play()
// Pause
player.pause()
// Stop
player.stop()
// Get the current image index
player.getIndex()
// Set the current image to a specific index
player.setIndex(index)
// Set playback speed
player.setPlaybackSpeed(1.5)

5. Customize img-player with available configuration options:

const player = imgPlayer(element, {
  // An array of images
  srcList: [],
  // Autoplay or not
  autoplay: false,
  // Playback speed
  playbackSpeed: 1,
  // Callback functions
  onPlay: () => {
    console.log('play')
  },
  onPause: () => {
    console.log('pause')
  },
  onStop: () => {
    console.log('stop')
  },
  onIndexUpdate: (index) => {
    console.log(index)
  },
})