<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Player de Vídeo Aesthetic</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #1a1a1a;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            flex-direction: column;
        }

        .player-container {
            width: 80%;
            max-width: 800px;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            position: relative;
        }

        video {
            width: 100%;
            height: auto;
            border-radius: 10px;
            outline: none;
        }

        /* Controles personalizados */
        .controls-container {
            position: absolute;
            bottom: 10px;
            left: 10px;
            right: 10px;
            display: flex;
            justify-content: space-between;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 10px;
        }

        .play-button,
        .volume-button,
        .fullscreen-button {
            background: transparent;
            border: none;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .play-button:hover,
        .volume-button:hover,
        .fullscreen-button:hover {
            transform: scale(1.1);
        }

        .play-button {
            font-size: 30px;
        }

        /* Esconder controles padrão */
        video::-webkit-media-controls {
            display: none !important;
        }

        video::-webkit-media-controls-panel {
            display: none !important;
        }

        /* Estilo do texto "Live Top Insana" */
        .live-text {
            color: #fff;
            font-size: 30px;
            font-weight: bold;
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="player-container">
    <video id="video">
        Seu navegador não suporta o elemento de vídeo.
    </video>

    <div class="controls-container">
        <button class="play-button" id="playBtn">&#9654;</button>
        <button class="volume-button" id="volumeBtn">&#128266;</button>
        <button class="fullscreen-button" id="fullscreenBtn">&#x26F6;</button>
    </div>
</div>

<!-- Texto abaixo do player -->
<div class="live-text">JUST #4fun</div>

<script>
    var video = document.getElementById('video');
    var playBtn = document.getElementById('playBtn');
    var volumeBtn = document.getElementById('volumeBtn');
    var fullscreenBtn = document.getElementById('fullscreenBtn');
    
    var videoSrc = 'https://channels.choraglobe.icu/fontes/embedcanais/b7cc583b8daefdc5511574f2c189634d3e4ed3a56ea63c4b685d455e276e19f8.m3u8';

    // Configura HLS.js
    if (Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource(videoSrc);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
            video.play();
        });
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = videoSrc;
        video.addEventListener('canplay', function () {
            video.play();
        });
    }

    // Play/Pause
    playBtn.addEventListener('click', function () {
        if (video.paused) {
            video.play();
            playBtn.innerHTML = '&#10074;&#10074;';
        } else {
            video.pause();
            playBtn.innerHTML = '&#9654;';
        }
    });

    // Volume
    volumeBtn.addEventListener('click', function () {
        video.muted = !video.muted;
        volumeBtn.innerHTML = video.muted ? '&#128263;' : '&#128266;';
    });

    // Tela cheia
    fullscreenBtn.addEventListener('click', function () {
        if (video.requestFullscreen) {
            video.requestFullscreen();
        } else if (video.webkitRequestFullscreen) {
            video.webkitRequestFullscreen();
        } else if (video.msRequestFullscreen) {
            video.msRequestFullscreen();
        }
    });
</script>

</body>
</html>
