xtremobile/web/player.html

<!DOCTYPE html>
<html>

<meta charset="UTF-8">
<title>IPTV Player</title>
<!-- Add HLS.js and mpegts.js dependencies -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@1.4.12/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mpegts.js@1.7.3/dist/mpegts.min.js"></script>
<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 {
        display: none;
        /* Hidden in production */
        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 parameters from query string
        const urlParams = new URLSearchParams(window.location.search);
        let streamUrl = urlParams.get('url');
        const startTime = parseFloat(urlParams.get('startTime') || '0');
        let lastReportedTime = 0;

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

        // Report current playback position to parent (for resume feature)
        function reportPosition() {
            if (video.currentTime > 0 && !video.paused && video.readyState > 2) {
                // Only report every 5 seconds or if time changed significantly
                if (Math.abs(video.currentTime - lastReportedTime) >= 5) {
                    lastReportedTime = video.currentTime;
                    window.parent.postMessage({
                        type: 'playback_position',
                        currentTime: video.currentTime,
                        duration: video.duration || 0
                    }, '*');
                }
            }
        }

        // Set up periodic position reporting
        setInterval(reportPosition, 5000);

        // Also report on pause
        video.addEventListener('pause', () => {
            window.parent.postMessage({
                type: 'playback_position',
                currentTime: video.currentTime,
                duration: video.duration || 0
            }, '*');
        });

        // Report when video ends
        video.addEventListener('ended', () => {
            window.parent.postMessage({
                type: 'playback_ended',
                duration: video.duration || 0
            }, '*');
        });

        // Report user activity (mouse movement) to parent
        let lastActivityTime = 0;
        document.addEventListener('mousemove', () => {
            const now = Date.now();
            if (now - lastActivityTime > 100) { // Throttle to 100ms
                lastActivityTime = now;
                window.parent.postMessage({
                    type: 'user_activity'
                }, '*');
            }
        });

        // Seek to startTime when video is ready
        video.addEventListener('loadedmetadata', () => {
            if (startTime > 0 && startTime < video.duration) {
                video.currentTime = startTime;
                log('Resuming from ' + Math.floor(startTime / 60) + 'm ' + Math.floor(startTime % 60) + 's');
            }
        });

        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;
            }

            // Optimized HLS.js configuration for stable live streaming
            const hls = new Hls({
                // Increase buffer for smoother playback
                maxBufferLength: 30,           // Max 30 seconds of buffer
                maxMaxBufferLength: 60,        // Allow up to 60 seconds in stressed conditions
                maxBufferSize: 60 * 1000000,   // 60MB max buffer size
                maxBufferHole: 0.5,            // Tolerate 0.5s gaps in buffer

                // Low latency settings (balanced)
                liveSyncDurationCount: 3,      // Sync to 3 segments behind live
                liveMaxLatencyDurationCount: 6, // Max 6 segments behind before seeking
                liveDurationInfinity: true,    // Treat live streams as infinite

                // Faster recovery from errors
                manifestLoadingTimeOut: 15000,  // 15s timeout for manifest
                manifestLoadingMaxRetry: 4,     // Retry manifest 4 times
                manifestLoadingRetryDelay: 1000, // 1s between retries
                levelLoadingTimeOut: 15000,     // 15s for level playlist
                levelLoadingMaxRetry: 4,
                levelLoadingRetryDelay: 1000,
                fragLoadingTimeOut: 20000,      // 20s for fragments
                fragLoadingMaxRetry: 6,         // Retry fragments 6 times
                fragLoadingRetryDelay: 1000,

                // Better quality selection
                startLevel: -1,                 // Auto-select start level
                abrEwmaDefaultEstimate: 500000, // Start assuming 500kbps
                abrBandWidthFactor: 0.95,       // Use 95% of measured bandwidth
                abrBandWidthUpFactor: 0.7,      // Be cautious when upgrading quality

                // Enable worker for better performance
                enableWorker: true,

                // Don't add extra headers
                xhrSetup: function (xhr, url) { }
            });

            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));
            });

            // Better error recovery
            hls.on(Hls.Events.ERROR, (event, data) => {
                log('HLS Error: ' + data.type + ' - ' + data.details);

                if (data.fatal) {
                    switch (data.type) {
                        case Hls.ErrorTypes.NETWORK_ERROR:
                            log('Network error, attempting recovery...');
                            hls.startLoad(); // Try to recover network errors
                            break;
                        case Hls.ErrorTypes.MEDIA_ERROR:
                            log('Media error, attempting recovery...');
                            hls.recoverMediaError(); // Try to recover media errors
                            break;
                        default:
                            showError('HLS Error: ' + data.details);
                            hls.destroy();
                            break;
                    }
                }
            });

            return true;
        }

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

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

            if (mpegts.getLoggingControl) {
                mpegts.getLoggingControl().enableAll = false;
                mpegts.getLoggingControl().enableError = true;
            }

            const player = mpegts.createPlayer({
                type: 'mpegts',
                isLive: true,
                url: url,
            }, {
                enableWorker: true,
                enableStashBuffer: true,
                stashInitialSize: 384 * 1024,
                autoCleanupSourceBuffer: true,
                // Make the player more resilient to timestamp gaps without spamming
                fixAudioTimestampGap: true,
                lazyLoadMaxDuration: 3 * 60,
                seekType: 'range',
            });

            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 video...');

            // Configure video for better buffering
            video.preload = 'auto';

            // Handle buffering events
            video.addEventListener('waiting', () => {
                log('Buffering...');
                showLoading('Buffering...');
            });

            video.addEventListener('playing', () => {
                hideLoading();
            });

            video.addEventListener('canplay', () => {
                hideLoading();
                video.play().catch(e => log('Autoplay prevented: ' + e));
            }, { once: true });

            video.addEventListener('error', (e) => {
                const error = video.error;
                let msg = 'Playback error';
                if (error) {
                    switch (error.code) {
                        case MediaError.MEDIA_ERR_NETWORK:
                            msg = 'Network error - retrying...';
                            log(msg);
                            // Retry after network error
                            setTimeout(() => {
                                video.load();
                                video.play().catch(() => { });
                            }, 2000);
                            return;
                        case MediaError.MEDIA_ERR_DECODE:
                            msg = 'Video decode error';
                            break;
                        case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
                            msg = 'Format not supported';
                            break;
                    }
                }
                showError(msg);
            });

            // Handle stalled playback (prevent rollback)
            video.addEventListener('stalled', () => {
                log('Stream stalled, waiting for data...');
            });

            // Set source and start loading
            video.src = url;
            video.load();
        }

        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
            const lowerUrl = streamUrl.toLowerCase();

            // HLS streams first
            if (lowerUrl.includes('.m3u8') || lowerUrl.includes('/hls/')) {
                await playWithHLS(streamUrl);
                return;
            }

            // MP4 and WebM - play directly (supports seeking via Range)
            if (lowerUrl.includes('.mp4') || lowerUrl.includes('.webm') || lowerUrl.includes('.mov')) {
                log('Detected MP4/WebM/MOV, playing directly with seek support');
                await playDirect(streamUrl);
                return;
            }

            // MKV, AVI - not natively supported, try anyway with fallback
            if (lowerUrl.includes('.mkv') || lowerUrl.includes('.avi') || lowerUrl.includes('.wmv') || lowerUrl.includes('.flv')) {
                log('Detected MKV/AVI - limited browser support, trying direct play...');
                showLoading('Loading video (format may not support seeking)...');

                // Try direct first, some browsers/servers may transcode on the fly
                video.src = streamUrl;

                let playStarted = false;
                const onCanPlay = () => {
                    playStarted = true;
                    hideLoading();
                    video.play().catch(e => log('Autoplay prevented: ' + e));
                };

                const onError = async () => {
                    if (!playStarted) {
                        log('Direct play failed for MKV/AVI, trying HLS fallback...');
                        video.removeEventListener('canplay', onCanPlay);
                        video.removeEventListener('error', onError);
                        // Try HLS as fallback (in case URL was actually HLS disguised)
                        const hlsSuccess = await playWithHLS(streamUrl);
                        if (!hlsSuccess) {
                            showError('Format not supported by browser. Try MP4 version if available.');
                        }
                    }
                };

                video.addEventListener('canplay', onCanPlay, { once: true });
                video.addEventListener('error', onError, { once: true });
                return;
            }

            // MPEG-TS streams (live)
            if (lowerUrl.includes('.ts')) {
                const success = await playWithMpegTS(streamUrl);
                if (!success) {
                    await playDirect(streamUrl);
                }
                return;
            }

            // Unknown format - try direct first (for VOD with Range support), then HLS
            log('Unknown format, trying direct first then HLS fallback');
            video.src = streamUrl;

            video.addEventListener('canplay', () => {
                hideLoading();
                video.play().catch(e => log('Autoplay prevented: ' + e));
            }, { once: true });

            video.addEventListener('error', async () => {
                log('Direct play failed, trying HLS...');
                await playWithHLS(streamUrl);
            }, { once: true });
        }

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

</html>