A modern, animated IPTV player for the web, featuring the Bugsfree Studio animated logo, playlist management, channel analysis, viewer stats, dark/light themes, and a retro TV scanlines effect.
No backend required – fully client-side, works with .m3u
, .m3u8
, .json
, .txt
playlists (local or via URL).
- Animated Bugsfree Studio Logo: Dynamic effects with intro and cycling animations.
- Playlist Management:
- Load playlists from file or URL (
.m3u
,.json
,.txt
). - Add favorites, view history, and easily reload playlists.
- Persist favorites/history to browser storage.
- Load playlists from file or URL (
- Channel Analysis & Visualization:
- Check which channels are online or offline (HEAD request).
- Pie chart visualization (Chart.js).
- Filter channel list by all/online/offline.
- Background Sync:
- Auto-refresh online/offline status every 2 minutes (configurable).
- Video Playback:
- HLS, DASH, MP4, TS support.
- Custom player with mute, brightness, contrast, saturation controls.
- Scanlines overlay for retro TV look.
- Animated Bugsfree logo in the player.
- UI/UX:
- Responsive, tabbed interface.
- Dark and light themes (with toggle, persists to local storage).
- Keyboard (arrow keys, space, enter, escape) and gesture support (swipe/tap for channel and volume).
- Channel preview, logo display, and viewer count.
- Other:
- "Report Issue" button linked to GitHub issues.
- No server required: everything runs in the browser.
git clone https://github.com/YOUR_USERNAME/YOUR_REPO.git
Or download the HTML/JS/CSS files and open in your browser.
Format | Description | Example |
---|---|---|
.m3u |
Standard IPTV format | #EXTINF:-1 tvg-logo="logo.png",Channel Name\nURL |
.txt |
Simple: `URL | Channel Name` per line |
.json |
Array or object with channels array/object |
{ "channels": [{ "src": "...", "name": "...", ... }]} |
- Open in browser
Just openindex.html
(or the page where this script is included). - Add Playlist
- Drag & drop, or use the upload form (file or URL).
- Channels are parsed and listed instantly.
- Playback Controls
- Click a channel to play.
- Use arrow keys, touch gestures, or on-screen buttons to switch channels or adjust volume.
- Favorites & History
- Star a channel to add to favorites.
- Uploaded/loaded playlists are remembered in history.
Action | How to Use |
---|---|
Next/Prev Channel | Arrow Down/Up or swipe |
Mute/Unmute | Space or mute buttons |
Volume | Arrow Left/Right, swipe |
Brightness/Contrast/etc | Use sliders |
Change Theme | Sun/Moon button |
Sidebar | Toggle button or Escape |
Add Playlist | Upload or URL forms |
Check Channel Status | "Sync" or enable auto |
- UI & Logic:
- Uses native DOM APIs (
$
,$all
helpers). - All state and playlists are managed in-memory and localStorage.
- Uses native DOM APIs (
- Playlist Parsing:
- Parses
.m3u
,.txt
,.json
formats, supporting various structures.
- Parses
- Player:
- Renders
<video>
tag with HLS.js or native support. - Animated logo is injected into the player UI.
- Renders
- Analysis:
- Uses
fetch
withHEAD
requests to check channel online status. - Chart.js for doughnut chart visualization.
- Uses
- Persistence:
- Uses
localStorage
for playlists, favorites, and history.
- Uses
- Settings & Theming:
- Theme is persisted, toggled via UI.
- All major UI elements are accessible via keyboard and mouse/touch.
channels
,favorites
,history
,filteredChannels
: Channel lists.playlistLoaded
,playlistKey
: Playlist state.currentChannelIndex
,isMuted
,scanlinesEnabled
,theme
: UI/player state.backgroundSyncEnabled
,backgroundSyncInterval
: Sync status.
- Playlist:
parseM3u
,parseJson
,parseTxt
,parseCustom
- Playback:
playChannel
,playByChannel
,nextChannel
,prevChannel
,toggleMute
- UI:
renderChannelList
,updateFavoritesListUI
,updateHistoryListUI
,updateMuteIcons
- Analysis:
updateAnalysis
,createChart
,syncAndShowOnlineChannels
- Animation:
addBugsfreeStudioLogoAnimation
,bfsLogoAnimCycle
- Default Logo/Poster: Change
DEFAULT_LOGO
andPLAYER_POSTER
constants. - Demo Playlist: Customize the
demoPlaylist
array. - Logo Animation: Modify or add CSS animation classes for
.special-animated
.
- Hls.js (for HLS playback in browsers that don't support it natively)
- feather-icons (SVG icon replacement)
- Chart.js (for analysis chart) All dependencies can be loaded via CDN.
- Bugsfree Studio
Animated branding and overall design - Contributors
See GitHub Contributors
- Found a bug? Open an issue
- Want to contribute? Submit a pull request!
IPTV streams must be used in accordance with their terms and local laws. This project is for educational purposes.
- DOGE: DEtH2yFUjjUEBUyd3scjs38X7S1Z7ee7zD
- BTC Lightening: bugsfree@speed.app
- SOL: bugsfree.sol