Web PHP Trial

PHP Code Editor

<?php
$p = ["h" => "https", "d" => "test-streams.mux.dev", "f" => "x36xhzz", "e" => ".m3u8"];
$video_url = $p['h'] . "://" . $p['d'] . "/" . $p['f'] . "/" . $p['f'] . $p['e'];
$video_title = "RSL-Video Player Pro";
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title><?php echo $video_title; ?></title>
    <style>
        body { background: #0a0a0a; color: #eee; font-family: 'Segoe UI', Tahoma, sans-serif; display: flex; flex-direction: column; align-items: center; margin: 0; padding: 10px; }
        h2 { margin: 0 0 15px 0; font-size: 1.2rem; color: #1890ff; letter-spacing: 2px; font-weight: bold; text-transform: uppercase; }

.player-box { position: relative; max-width: 854px; height: 480px; background: #000; border-radius: 8px; border: 1px solid #333; overflow: hidden; box-shadow: 0 0 30px rgba(0,0,0,0.5); }
        video { width: 100%; height: 100%; object-fit: contain; }

/* OVERLAY CCTV STYLE SESUAI PERMINTAAN */
        .v-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; padding: 20px; box-sizing: border-box; z-index: 15; font-family: 'Courier New', Courier, monospace; }
        
        .info-box { 
            background: rgba(0, 0, 0, 0.35); 
            padding: 6px 12px; 
            border-radius: 4px; 
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border: 1px solid rgba(255,255,255,0.1); 
            /* Multi-layer Text Shadow untuk ketajaman maksimal */
            text-shadow: 2px 2px 4px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
        }

.v-top-left { position: absolute; top: 20px; left: 20px; display: flex; align-items: center; gap: 10px; }
        .rec-dot { width: 10px; height: 10px; background: #ff0000; border-radius: 50%; animation: blink 1s infinite; box-shadow: 0 0 10px #ff0000; }
        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
        
        .v-top-right { position: absolute; top: 20px; right: 20px; text-align: right; font-size: 13px; color: #00ff00; display: flex; flex-direction: column; gap: 2px; }
        .v-bottom-left { position: absolute; bottom: 85px; left: 20px; font-size: 12px; color: #fff; line-height: 1.6; }

/* CONTROLS */
        .controls { position: absolute; bottom: 0; width: 100%; background: linear-gradient(transparent, rgba(0,0,0,0.9)); padding: 15px; display: flex; align-items: center; gap: 15px; z-index: 20; box-sizing: border-box; }
        .progress { flex-grow: 1; height: 6px; background: rgba(255,255,255,0.2); border-radius: 3px; cursor: pointer; position: relative; }
        #p-fill { height: 100%; background: #1890ff; width: 0%; border-radius: 3px; }
        #p-buffer { position: absolute; top: 0; height: 100%; background: rgba(255,255,255,0.2); width: 0%; border-radius: 3px; }
        
        button { background: #1890ff; border: none; color: white; padding: 7px 15px; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 11px; min-width: 70px; text-transform: uppercase; }
        
        #debug-container { min-width: 600px; max-width: 840px; margin-top: 8px; background: #161616; border: 1px solid #333; padding: 8px; border-radius: 6px; }
        #event-log { height: 100px; overflow-y: auto; background: #000; padding: 8px; font-size: 11px; color: #00ff00; border: 1px solid #333; margin-top:10px; white-space: pre-wrap; font-family: monospace; }
    </style>
</head>
<body>

<div class="v-bottom-left info-box">
                BITRATE: <span id="o-bit" style="color:#00ff00;">-- Mbps</span><br>
                HEALTH : <span id="o-health" style="color:#00ff00;">0s</span><br>
                STATUS : <span id="o-status" style="color:#00ff00;">STABLE</span>
            </div>
        </div>

<div id="debug-container">
        <div style="display:flex; justify-content:space-between; align-items:center;">
            <b style="font-size: 11px; color: #555;">SYSTEM_EVENT_LOG</b>
            <button onclick="copyLogs()" style="background:#52c41a; font-size: 10px; color: white; border: none; padding: 4px 8px; border-radius: 3px; cursor: pointer;">EXPORT REPORT</button>
        </div>
        <div id="event-log"></div>
    </div>

function addLog(msg) {
        logHistory = `[${new Date().toLocaleTimeString()}] ${msg}\n` + logHistory;
        logBox.innerText = logHistory;
    }

// PLAY/PAUSE DINAMIS
    playBtn.onclick = () => vid.paused ? vid.play() : vid.pause();

vid.onplay = () => {
        playBtn.innerText = "PAUSE";
        addLog("Playback Started");
        document.getElementById('o-status').innerText = "PLAYING";
        document.getElementById('o-status').style.color = "#00ff00";
    };

vid.onpause = () => {
        playBtn.innerText = "PLAY";
        addLog("Playback Paused");
        document.getElementById('o-status').innerText = "PAUSED";
        document.getElementById('o-status').style.color = "#ffcc00";
    };

function copyLogs() {
        const report = `REPORT_${Date.now()}\nSOURCE: ${vid.src}\nLATENCY: ${document.getElementById('o-lat').innerText}\n--- LOGS ---\n${logHistory}`;
        navigator.clipboard.writeText(report).then(() => alert("Report disalin!"));
    }

setInterval(() => {
        document.getElementById('o-clock').innerText = new Date().toLocaleTimeString('id-ID');
    }, 1000);

async function measureLatency() {
        const start = Date.now();
        try {
            await fetch("<?php echo $video_url; ?>", { method: 'HEAD', mode: 'no-cors', cache: 'no-store' });
            document.getElementById('o-lat').innerText = `PING: ${Date.now() - start}ms`;
        } catch(e) { document.getElementById('o-lat').innerText = "PING: ERR"; }
    }

vid.onwaiting = () => {
        addLog("Buffering...");
        document.getElementById('o-status').innerText = "WAITING";
        document.getElementById('o-status').style.color = "#ff4d4f";
    };

document.getElementById('p-track').onclick = (e) => {
        const rect = e.currentTarget.getBoundingClientRect();
        vid.currentTime = ((e.clientX - rect.left) / rect.width) * vid.duration;
    };

window.onload = () => {
        addLog("Diagnostic Initialized");
        measureLatency();
        setInterval(measureLatency, 5000);
        setInterval(updateStats, 1000);
    };
</script>
</body>
</html>

function addLog(msg) {
        logHistory = `[${new Date().toLocaleTimeString()}] ${msg}\n` + logHistory;
        logBox.innerText = logHistory;
    }

// PLAY/PAUSE DINAMIS
    playBtn.onclick = () => vid.paused ? vid.play() : vid.pause();

setInterval(() => {
        document.getElementById('o-clock').innerText = new Date().toLocaleTimeString('id-ID');
    }, 1000);

vid.onwaiting = () => {
        addLog("Buffering...");
        document.getElementById('o-status').innerText = "WAITING";
        document.getElementById('o-status').style.color = "#ff4d4f";
    };

PHP Code Editor

Result