xtremflow/web/player.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>IPTV Player</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #000;
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: Arial, sans-serif;
        }

        #player-container {
            width: 100%;
            height: 100%;
            position: relative;
        }

        #video {
            width: 100%;
            height: 100%;
            background: #000;
        }

        #error {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            text-align: center;
        }

        #error-icon {
            font-size: 64px;
            color: #f44336;
            margin-bottom: 16px;
        }

        #loading {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            text-align: center;
        }

        .spinner {
            width: 48px;
            height: 48px;
            border: 4px solid #fff;
            border-top-color: transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 16px;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        #debug {
            position: absolute;
            bottom: 10px;
            left: 10px;
            color: #0f0;
            font-size: 12px;
            font-family: monospace;
            background: rgba(0, 0, 0, 0.7);
            padding: 8px;
            border-radius: 4px;
            max-width: 80%;
            word-break: break-all;
        }
    </style>
</head>

<body>
    <div id="player-container">
        <video id="video" controls autoplay></video>
        <div id="loading">
            <div class="spinner"></div>
            <div id="loading-text">Loading stream...</div>
        </div>
        <div id="error">
            <div id="error-icon">⚠</div>
            <div id="error-message">Failed to load stream</div>
        </div>
        <div id="debug"></div>
    </div>

    <!-- Try HLS.js first, then fall back to mpegts.js -->
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/mpegts.js@latest/dist/mpegts.min.js"></script>
    <script>
        const video = document.getElementById('video');
        const loading = document.getElementById('loading');
        const loadingText = document.getElementById('loading-text');
        const error = document.getElementById('error');
        const errorMessage = document.getElementById('error-message');
        const debug = document.getElementById('debug');

        // Get stream URL from query parameter
        const urlParams = new URLSearchParams(window.location.search);
        let streamUrl = urlParams.get('url');

        function log(msg) {
            console.log(msg);
            debug.textContent = msg;
        }

        function showLoading(msg) {
            loading.style.display = 'block';
            loadingText.textContent = msg || 'Loading stream...';
            error.style.display = 'none';
        }

        function hideLoading() {
            loading.style.display = 'none';
        }

        function showError(message) {
            hideLoading();
            error.style.display = 'block';
            errorMessage.textContent = message || 'Failed to load stream';
        }

        async function playWithHLS(url) {
            log('Trying HLS.js with: ' + url);
            showLoading('Loading HLS stream...');

            if (!Hls.isSupported()) {
                // Try native HLS (Safari)
                if (video.canPlayType('application/vnd.apple.mpegurl')) {
                    video.src = url;
                    video.addEventListener('canplay', () => {
                        hideLoading();
                        video.play().catch(e => log('Autoplay prevented: ' + e));
                    });
                    video.addEventListener('error', () => {
                        showError('HLS playback error');
                    });
                    return true;
                }
                return false;
            }

            const hls = new Hls({
                xhrSetup: function (xhr, url) {
                    // Don't add extra headers - the proxy already handles this
                }
            });

            hls.loadSource(url);
            hls.attachMedia(video);

            hls.on(Hls.Events.MANIFEST_PARSED, () => {
                log('HLS manifest parsed, starting playback');
                hideLoading();
                video.play().catch(e => log('Autoplay prevented: ' + e));
            });

            hls.on(Hls.Events.ERROR, (event, data) => {
                log('HLS Error: ' + data.type + ' - ' + data.details);
                if (data.fatal) {
                    showError('HLS Error: ' + data.details);
                }
            });

            return true;
        }

        async function playWithMpegTS(url) {
            log('Trying mpegts.js with: ' + url);
            showLoading('Loading MPEG-TS stream...');

            if (!mpegts.isSupported()) {
                return false;
            }

            const player = mpegts.createPlayer({
                type: 'mpegts',
                isLive: true,
                url: url,
            }, {
                enableWorker: true,
                enableStashBuffer: true,
                stashInitialSize: 384 * 1024,
                autoCleanupSourceBuffer: true,
            });

            player.attachMediaElement(video);
            player.load();

            video.addEventListener('canplay', () => {
                log('MPEG-TS stream ready');
                hideLoading();
                video.play().catch(e => log('Autoplay prevented: ' + e));
            });

            video.addEventListener('error', (e) => {
                showError('Video error: ' + (video.error?.message || 'Unknown error'));
            });

            player.on(mpegts.Events.ERROR, (errType, errDetail, errInfo) => {
                log('mpegts error: ' + errType + ' - ' + errDetail);
                showError('Stream error: ' + errDetail);
            });

            return true;
        }

        async function playDirect(url) {
            log('Trying direct playback: ' + url);
            showLoading('Loading stream directly...');

            video.src = url;
            video.addEventListener('canplay', () => {
                hideLoading();
                video.play().catch(e => log('Autoplay prevented: ' + e));
            });
            video.addEventListener('error', () => {
                showError('Direct playback error');
            });
        }

        async function initPlayer() {
            if (!streamUrl) {
                showError('No stream URL provided');
                return;
            }

            log('Stream URL: ' + streamUrl.substring(0, 80) + '...');

            // Determine stream type and try appropriate player
            if (streamUrl.includes('.m3u8')) {
                await playWithHLS(streamUrl);
            } else if (streamUrl.includes('.ts')) {
                const success = await playWithMpegTS(streamUrl);
                if (!success) {
                    await playDirect(streamUrl);
                }
            } else {
                // Try HLS first, then MPEG-TS
                await playWithHLS(streamUrl);
            }
        }

        initPlayer();
    </script>
</body>

</html>