Video velocidade 1.5 X

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

     }

     /* TEMPO DE EXIBIÇÃO */

     .time-display {

         color: #ffffff;

         font-size: 13px;

     }

</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 class="time-display">

                    <span id="currentTime">00:00</span> / <span id="duration">00:00</span>

             </div>

            </div>

         <div class="right-controls">

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

            </div>

     </div>

</div>

</div>

<script>

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 currentTimeSpan = document.getElementById('currentTime');

const durationSpan = document.getElementById('duration');

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

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

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

// AJUSTE DE VELOCIDADE FIXA EM 1.5x

video.playbackRate = 1.5;

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 formatTime(seconds) {

     const min = Math.floor(seconds / 60);

     const sec = Math.floor(seconds % 60);

     return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;

}

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 = 1.5; // Garante a taxa após o carregamento da mídia

     seekBar.max = video.duration;

        durationSpan.textContent = formatTime(video.duration);

});

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

     seekBar.value = video.currentTime;

        currentTimeSpan.textContent = formatTime(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>