IPTV Player IPTV Player Dashboard Live Streams On Demand Playlists Video Player Your browser does not support the video tag. Available Channels Playlists Script IPTV VIEWER SCRIPT <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>IPTV Player</title> <style> /* Box-Sizing */ *, *::before, *::after { box-sizing: border-box; } body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } .nav-menu { display: flex; justify-content: center; padding: 10px; background: #444; } .nav-menu a { color: #fff; padding: 14px 20px; text-decoration: none; text-transform: uppercase; font-size: 16px; } .nav-menu a:hover { background: #555; } .content-wrapper { width: 100%; margin: auto; padding: 10px; } .main-content { display: flex; flex-direction: column; gap: 20px; } .channel-section, .video-section, .playlist-section { background: #fff; padding: 10px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .channel-grid, .playlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 5px; overflow: auto; /* Add scrollbar if needed */ height: 300px; /* Adjust height */ } .channel-item, .playlist-item { background: lime; align-items: center; padding: 5px; width: 70px; height: 70px; display: flex; flex-direction: column; justify-content: center; border-radius: 5px; text-align: center; cursor: pointer; transition: background 0.3s; font-size: 12px; } .channel-item:hover, .playlist-item:hover { background: #ccc; } .channel-item img, .playlist-item img { width: 100%; height: auto; border-radius: 5px; } .video-section video { width: 100%; border-radius: 5px; } /* Responsive styles */ @media (min-width: 768px) { .main-content { flex-direction: row; } } </style> </head> <body> <nav class="nav-menu"> <a href="#">Dashboard</a> <a href="#">Live Streams</a> <a href="#">On Demand</a> <a href="#">Playlists</a> </nav> <div class="content-wrapper"> <div class="main-content"> <div class="video-section"> <h2>Video Player</h2> <video id="video-player" controls> <source src="" type="video/mp4"> Your browser does not support the video tag. </video> </div> <div class="channel-section"> <h2>Available Channels</h2> <div id="channel-list" class="channel-grid"> <!-- Channels will be populated here --> </div> </div> </div> <div class="playlist-section"> <h2>Playlists</h2> <div id="playlist-list" class="playlist-grid"> <!-- Playlists will be populated here --> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const m3uUrl = 'https://iptv-org.github.io/iptv/index.category.m3u'; async function fetchM3U() { try { const response = await fetch(m3uUrl); const data = await response.text(); parseM3U(data); } catch (error) { console.error('Error fetching M3U file:', error); } } function parseM3U(data) { const lines = data.split('\n'); const channels = []; let currentChannel = null; let currentImage = null; lines.forEach(line => { if (line.startsWith('#EXTINF:')) { const name = line.split(',')[1]; currentChannel = { name }; } else if (line.startsWith('http') && currentChannel && !currentImage) { currentImage = line; // Assume this line is an image URL } else if (line.startsWith('http') && currentChannel) { if (currentImage) { currentChannel.icon = currentImage; currentChannel.url = line; channels.push(currentChannel); currentChannel = null; currentImage = null; } } }); displayChannels(channels); } function displayChannels(channels) { const listElement = document.getElementById('channel-list'); listElement.innerHTML = ''; channels.forEach(channel => { const div = document.createElement('div'); div.className = 'channel-item'; const img = document.createElement('img'); img.src = channel.icon; // Lazy load could be added here const text = document.createElement('div'); text.textContent = channel.name; div.appendChild(img); div.appendChild(text); div.onclick = () => playStream(channel.url); listElement.appendChild(div); }); } function playStream(url) { const videoPlayer = document.getElementById('video-player'); videoPlayer.src = url; videoPlayer.play(); } fetchM3U(); }); </script> </body> </html> Copy to Clipboard Copy
