https://github.com/hasielhassan/gifplayerjs
A libgif based Gif Player for JavaScript
https://github.com/hasielhassan/gifplayerjs
gif javascript player
Last synced: about 2 months ago
JSON representation
A libgif based Gif Player for JavaScript
- Host: GitHub
- URL: https://github.com/hasielhassan/gifplayerjs
- Owner: hasielhassan
- License: mit
- Created: 2025-01-08T06:36:45.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-03-30T05:09:52.000Z (2 months ago)
- Last Synced: 2025-03-30T06:18:08.248Z (2 months ago)
- Topics: gif, javascript, player
- Language: JavaScript
- Homepage:
- Size: 9.76 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
# GifPlayerJS
GifPlayerJS is a lightweight JavaScript utility that converts standard `![]()
` elements pointing to `.gif` files into interactive, frame-by-frame GIF players with play/pause controls and a timeline slider. It leverages [libgif.js](https://github.com/kelyvin/libgif-js) under the hood to give you control over each GIF’s frames.
---
## Features
- **Play/Pause**: Easily toggle GIF playback.
- **Timeline Slider**: Scrub through frames to see specific parts of the GIF.
- **Fullscreen Mode**: Top right corner button on player to enter/exit fullscreen mode.
- **Auto-Initialization**: Automatically finds all `![]()
` elements whose `src` attribute ends in `.gif` (case-insensitive).
- **No External Dependencies**: Other than [libgif.js](https://github.com/kelyvin/libgif-js), you just need this single script to enable interactive GIF controls on your page.
- **Lightweight**: Straightforward and minimal code—perfect for small projects or demos.
## For the future:
- [ ] Implement proper CSS for styling of the playback controls
- [ ] Implement a proper Player class that encapsulates everything in a single div
---
## Getting Started
### 1. Include libgif.js and GifPlayerJS
In your HTML, make sure you include [libgif.js](https://www.jsdelivr.com/package/npm/libgif) **before** `gifplayer.js`:
```html
```
### 2. Initialize
After the page has loaded, call InitializeGifPlayers() to convert all .gif images into interactive players:
```html
window.addEventListener('load', InitializeGifPlayers);
```
### Example
Here’s a minimal working example (`example.html`):
```html
GifPlayerJS Example
// On load, initialize
window.addEventListener('load', InitializeGifPlayers);
```
### Technical notes
Since this project uses libgif, it also inheriths the `same-domain origin` restriction and must be loaded via a webserver, not directly from disk.
For more info reference the original notes on libgif: [caveat-same-domain-origin](https://github.com/kelyvin/libgif-js/?tab=readme-ov-file#caveat-same-domain-origin)