Ativa controle para vídeos VLS

videoControls.js

// Copie cole em devtools > console
// Para a console pode-se usar Abra as DevTools do navegador (F12 ou Ctrl+Shift+I).
(() => {
  // Seleciona todos os elementos <video> na página
  document.querySelectorAll('video').forEach(video => {
    try {
      // Adiciona controles ao vídeo
      video.setAttribute('controls', 'controls');
      video.setAttribute('controlslist', 'nodownload'); // Impede download (opcional)
      video.removeAttribute('autoplay'); // Remove autoplay
      video.style.display = 'block'; // Garante que o vídeo seja visível
      video.style.width = '100%';
      video.style.height = 'auto';
      video.style.outline = 'none';

      // Adiciona estilo para garantir que os controles sejam exibidos corretamente
      const style = document.createElement('style');
      style.innerHTML = `
        video::-webkit-media-controls {
          display: flex !important;
        }
        video {
          display: block !important;
          outline: none !important;
        }
      `;
      document.head.appendChild(style);

      // Exibe mensagem no console confirmando ajustes
      console.log('Controles habilitados para o vídeo:', video);
    } catch (error) {
      console.error('Erro ao ajustar vídeo:', error);
    }
  });

  // Adiciona suporte a atalhos de teclado para controle do vídeo
  document.addEventListener('keydown', (event) => {
    const video = document.querySelector('video'); // Seleciona o primeiro vídeo encontrado
    if (!video) return; // Sai se nenhum vídeo for encontrado

    switch (event.key.toLowerCase()) {
      case ' ': // Espaço: Pausar/Reproduzir
        if (video.paused) {
          video.play();
          console.log('Reproduzindo o vídeo');
        } else {
          video.pause();
          console.log('Vídeo pausado');
        }
        break;
      case 'arrowright': // Seta para a direita: Avançar 5 segundos
        video.currentTime += 5;
        console.log('Avançou 5 segundos');
        break;
      case 'arrowleft': // Seta para a esquerda: Retroceder 5 segundos
        video.currentTime -= 5;
        console.log('Retrocedeu 5 segundos');
        break;
      case 'arrowup': // Seta para cima: Aumentar volume
        video.volume = Math.min(video.volume + 0.1, 1);
        console.log(`Volume aumentado para ${(video.volume * 100).toFixed(0)}%`);
        break;
      case 'arrowdown': // Seta para baixo: Diminuir volume
        video.volume = Math.max(video.volume - 0.1, 0);
        console.log(`Volume reduzido para ${(video.volume * 100).toFixed(0)}%`);
        break;
      case 'm': // M: Ativar/Desativar som
        video.muted = !video.muted;
        console.log(video.muted ? 'Som desativado' : 'Som ativado');
        break;
      case 'f': // F: Tela cheia
        if (video.requestFullscreen) {
          video.requestFullscreen();
          console.log('Entrou no modo tela cheia');
        }
        break;
      default:
        break;
    }
  });
})();