@khopha/img-player

A lightweight JavaScript library that renders image sequences with video-like controls.

Installation

To install the library, run:

npm i @khopha/img-player

Usage

Create an imgPlayer object by passing an HTML element and options, then call the play function to start playback. That's it!

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

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

const element = document.getElementById('img-player')

const images = [
  'path/to/image/1',
  'path/to/image/2',
]

const player = imgPlayer(element, {
  srcList: images
})

player.play()

Options

These are the available options for creating an imgPlayer object:

const player = imgPlayer(element, {

  // List of image sources. Default is an empty array.
  srcList: [],

  // Automatically play the player after creating an object. Default is false.
  autoplay: true,

  // Playback speed of the player. Default is 1.
  playbackSpeed: 1,

  // Event triggered when play is called.
  onPlay: () => {
    console.log('play')
  },

  // Event triggered when pause is called.
  onPause: () => {
    console.log('pause')
  },

  // Event triggered when stop is called.
  onStop: () => {
    console.log('stop')
  },

  // Event triggered when the index is updated, with the index of the image passed as a parameter.
  onIndexUpdate: (index) => {
    console.log(index)
  },
})

Functions

You can call these functions on an imgPlayer object:

// 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)

License

MIT