Video velocidade 1.5 X e SEM cronômetro

<!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 Customizado</title>

    <style>

        /* CONTAINER PRINCIPAL DO PLAYER */

        .player-container {

            position: relative;

            width: 740px;

            max-width: 100%;

            background-color: #000000;

            border: 2px solid #000000;

            border-radius: 8px;

            overflow: hidden;

            font-family: Arial, sans-serif;

            box-shadow: 0 4px 10px rgba(0,0,0,0.3);

            margin: 20px auto;

            /* Bloqueia a seleção de texto e o menu de toque longo em alguns sistemas mobile */

            -webkit-user-select: none;

            -webkit-touch-callout: none;

            user-select: none;

        }

        /* 1. ÁREA DE EXIBIÇÃO DO VÍDEO */

        .video-display {

            width: 100%;

            display: block;

            cursor: pointer;

        }

        /* CAMADA INVISÍVEL ANTI-DOWNLOAD */

        .video-shield {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: calc(100% - 50px); /* Deixa a área dos controles livre para cliques */

            z-index: 5;

            cursor: pointer;

        }

        /* CAMADA DOS CONTROLES (Flutua sobre o vídeo) */

        .player-controls {

            position: absolute;

            bottom: 0;

            left: 0;

            right: 0;

            background: rgba(0, 0, 0, 0.75);

            display: flex;

            flex-direction: column;

            padding: 10px;

            opacity: 1;

            transition: opacity 0.5s ease, transform 0.5s ease;

            transform: translateY(0);

            z-index: 10;

        }

        /* CLASSE QUE FAZ A BARRA DESCER E SUMIR VAGOROSAMENTE */

        .player-controls.hide-controls {

            opacity: 0;

            transform: translateY(100%);

            pointer-events: none;

        }

        /* BARRA DE PROGRESSO (SEEK BAR) */

        .progress-container {

            display: flex;

            align-items: center;

            margin-bottom: 10px;

        }

        .seek-bar {

            width: 100%;

            cursor: pointer;

            accent-color: #2196F3;

        }

        /* LINHA DOS BOTÕES DE CONTROLE */

        .control-row {

            display: flex;

            justify-content: space-between;

            align-items: center;

        }

        .left-controls, .right-controls {

            display: flex;

            align-items: center;

            gap: 15px;

        }

        /* ESTILIZAÇÃO DOS BOTÕES E TEXTOS DOS CONTROLES */

        .btn-control {

            background: none;

            border: none;

            color: #ffffff;

            font-size: 14px;

            font-weight: bold;

            cursor: pointer;

            padding: 5px 10px;

            border-radius: 4px;

            transition: background 0.2s;

        }

        .btn-control:hover {

            background: rgba(255, 255, 255, 0.2);

        }

        /* ESTILO ESPECÍFICO PARA A MARCA SINAQI (Apenas exibição, sem clique) */

        .brand-display {

            color: #ffffff;

            font-size: 14px;

            font-weight: bold;

            padding: 5px 10px;

            letter-spacing: 0.5px;

        }

        /* CONTROLE DE VOLUME */

        .volume-container {

            display: flex;

            align-items: center;

            gap: 5px;

            color: white;

            font-size: 12px;

        }

        .volume-bar {

            width: 70px;

            cursor: pointer;

            accent-color: #ffffff;

        }

    </style>

</head>

<body>

<div class="player-container" id="playerContainer">

    <div class="video-shield" id="videoShield"></div>

    <video class="video-display" id="myVideo" 

           src="https://www.dropbox.com/scl/fi/ljjswb3ep636lyn2d4vmk/Bio-VR-Aula-01-pg-03-a-10.mp4?rlkey=85x7eh6xswxl9hr4neqdrf2nm&st=augzuq5w&raw=1"

           preload="metadata" 

           controlsList="nodownload"></video>

    <div class="player-controls" id="playerControls">

        <div class="progress-container">

            <input type="range" class="seek-bar" id="seekBar" min="0" value="0" step="0.1">

        </div>

        <div class="control-row">

            <div class="left-controls">

                <button class="btn-control" id="playBtn">▶</button>

                <div class="volume-container">

                    <button class="btn-control" id="muteBtn" style="padding:2px 5px;">🔊</button>

                    <input type="range" class="volume-bar" id="volumeBar" min="0" max="1" step="0.05" value="1">

                </div>

            </div>

            <div class="right-controls">

                <span class="brand-display">Sinaqi</span>

            </div>

        </div>

    </div>

</div>

<script>

    // ========================================================

    // AJUSTE AQUI A VELOCIDADE DO VÍDEO (Ex: 1.0, 1.25, 1.5, 2.0)

    // ========================================================

    const VELOCIDADE_PADRAO = 1.5;

    const video = document.getElementById('myVideo');

    const playBtn = document.getElementById('playBtn');

    const muteBtn = document.getElementById('muteBtn');

    const seekBar = document.getElementById('seekBar');

    const volumeBar = document.getElementById('volumeBar');

    const playerContainer = document.getElementById('playerContainer');

    const controls = document.getElementById('playerControls');

    const videoShield = document.getElementById('videoShield');

    // Aplica a velocidade definida

    video.playbackRate = VELOCIDADE_PADRAO;

    let controlsTimeout;

    // BLOQUEIO: Impedir clique com o botão direito em todo o container do player

    playerContainer.addEventListener('contextmenu', (e) => {

        e.preventDefault();

    });

    function hideControls() {

        if (!video.paused) {

            controls.classList.add('hide-controls');

            playerContainer.style.cursor = 'none';

        }

    }

    function showControls() {

        controls.classList.remove('hide-controls');

        playerContainer.style.cursor = 'default';

        clearTimeout(controlsTimeout);

        controlsTimeout = setTimeout(hideControls, 3000); 

    }

    playerContainer.addEventListener('mousemove', showControls);

    playerContainer.addEventListener('click', showControls);

    playerContainer.addEventListener('touchstart', showControls, {passive: true});

    video.addEventListener('pause', () => {

        clearTimeout(controlsTimeout);

        controls.classList.remove('hide-controls');

        playerContainer.style.cursor = 'default';

    });

    video.addEventListener('play', () => {

        clearTimeout(controlsTimeout);

        controlsTimeout = setTimeout(hideControls, 3000);

    });

    function togglePlay() {

        if (video.paused) {

            video.play();

            playBtn.textContent = '❚❚';

        } else {

            video.pause();

            playBtn.textContent = '▶';

        }

    }

    playBtn.addEventListener('click', (e) => {

        e.stopPropagation();

        togglePlay();

    });

    // Cliques capturados na película invisível

    videoShield.addEventListener('click', (e) => {

        e.stopPropagation();

        togglePlay();

    });

    video.addEventListener('loadedmetadata', () => {

        video.playbackRate = VELOCIDADE_PADRAO; // Garante a taxa após carregar a mídia

        seekBar.max = video.duration;

    });

    video.addEventListener('timeupdate', () => {

        seekBar.value = video.currentTime;

    });

    seekBar.addEventListener('input', () => {

        video.currentTime = seekBar.value;

    });

    volumeBar.addEventListener('input', () => {

        video.volume = volumeBar.value;

        if (video.volume === 0) {

            muteBtn.textContent = '🔇';

        } else if (video.volume < 0.5) {

            muteBtn.textContent = '🔉';

        } else {

            muteBtn.textContent = '🔊';

        }

    });

    muteBtn.addEventListener('click', (e) => {

        e.stopPropagation();

        if (video.muted) {

            video.muted = false;

            muteBtn.textContent = video.volume < 0.5 ? '🔉' : '🔊';

            volumeBar.value = video.volume;

        } else {

            video.muted = true;

            muteBtn.textContent = '🔇';

            volumeBar.value = 0;

        }

    });

</script>

</body>

</html>