@khopha/img-player
v0.1.2
Published
A lightweight JavaScript library that renders image sequences with video-like controls.
Downloads
6
Readme
@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