xtremflow/web/player_mobile.html

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>XtremFlow Player Mobile</title>
    <link rel="stylesheet" href="xf-player.css">
    <link rel="preload" href="vendor/hls.min.js" as="script">
</head>

<body>
    <div id="player-container">
        <!-- muted au départ : seul moyen fiable d'obtenir l'autoplay sur iOS -->
        <video id="video" autoplay muted playsinline webkit-playsinline preload="auto"></video>

        <div id="loading" class="xf-center">
            <div class="xf-leader">
                <div class="xf-leader-cross"></div>
            </div>
            <div class="xf-label" id="l-text">Ouverture du flux</div>
            <div class="xf-hint" id="loading-hint"></div>
        </div>

        <button id="unmute-btn" class="xf-sound-btn" type="button">
            <svg viewBox="0 0 24 24">
                <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z" />
            </svg>
            Activer le son
        </button>

        <div id="error" class="xf-center">
            <div class="xf-error-mark">!</div>
            <div class="xf-error-title" id="err-msg">Erreur de lecture</div>
            <div class="xf-error-sub" id="err-sub">Vérifiez votre connexion</div>
        </div>
    </div>

    <script src="xf-player-core.js"></script>
    <script>
        (function () {
            var video = document.getElementById('video');
            var loading = document.getElementById('loading');
            var loadingText = document.getElementById('l-text');
            var loadingHint = document.getElementById('loading-hint');
            var unmuteBtn = document.getElementById('unmute-btn');
            var errorBox = document.getElementById('error');

            var retryCount = 0;
            var maxRetries = 3;
            var player = null;

            function showLoading(msg) {
                loading.style.display = 'block';
                loadingText.textContent = msg || 'Ouverture du flux';
                errorBox.style.display = 'none';
            }

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

            function showError(msg) {
                hideLoading();
                unmuteBtn.style.display = 'none';
                errorBox.style.display = 'block';
                document.getElementById('err-sub').textContent =
                    msg || 'Format non supporté ou lien expiré';
            }

            // Le geste utilisateur doit avoir lieu DANS l'iframe : iOS
            // n'accepte le démutage que dans ce contexte.
            unmuteBtn.addEventListener('click', function (e) {
                e.preventDefault();
                video.muted = false;
                video.volume = 1.0;
                unmuteBtn.style.display = 'none';
                window.parent.postMessage({ type: 'unmuted' }, '*');
            });

            function buildPlayer() {
                if (player) { try { player.destroy(); } catch (e) {} }

                player = new XFPlayer({
                    video: video,
                    logPrefix: '[MobilePlayer]',
                    onLoading: showLoading,
                    onReady: function () {
                        hideLoading();
                        retryCount = 0;
                        // Tentative de démutage auto ; si iOS refuse, on propose le bouton.
                        if (video.muted) {
                            video.muted = false;
                            unmuteBtn.style.display = video.muted ? 'flex' : 'none';
                        }
                    },
                    onError: function (msg) {
                        if (retryCount < maxRetries) {
                            retryCount++;
                            showLoading('Reconnexion ' + retryCount + '/' + maxRetries);
                            setTimeout(buildPlayer, 1500);
                        } else {
                            showError(msg);
                        }
                    },
                    onBlocked: function () {
                        // Autoplay refusé même en sourdine : le bouton son sert
                        // aussi de déclencheur de lecture.
                        hideLoading();
                        unmuteBtn.style.display = 'flex';
                    },
                    onProfileChange: function (name) {
                        loadingHint.textContent =
                            name === 'safe' ? 'Réseau instable — buffer maximal'
                                            : 'Réseau instable — buffer élargi';
                    }
                });

                player.start();
                window.xfPlayer = player;
            }

            video.addEventListener('touchend', function () {
                window.parent.postMessage({ type: 'user_activity' }, '*');
            }, { passive: true });

            buildPlayer();
        })();
    </script>
</body>

</html>