IPTV Player

app ssiptv

27 Aug, 2024

IPTV Player

Video Player

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">
                    
                </div>
            </div>
        </div>
        <div class="playlist-section">
            <h2>Playlists</h2>
            <div id="playlist-list" class="playlist-grid">
                
            </div>
        </div>
    </div>

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>

IPTV Player

Video Player

Available Channels

Playlists

Popular Posts

Categories

Hashtag

Blog Archive

Video Player

Available Channels

Playlists

Popular Posts

Wordpress Advanced With The Custom Fields Pro

Create Simple YouTube Video Downloader Using Html css And Java

Nintendo Switch Shows Off MONSTER HUNTER RISE Edition

Auto-Resize Image Sizes Blogger posts pics

You Are Not Anonymous When Using A Proxy

Categories

Hashtag

Blog Archive