Vídeo Simples
Reprodução linear de vídeo sem interrupções. Apresenta conteúdo expositivo, demonstrações ou narrativas que o aprendiz assiste de forma contínua.
Experimente
O que é comprometimento organizacional
Código-fonte
Dados de exemplo
O título exibido no cabeçalho.
| 1 |
<?php
|
| 2 |
$titulo = 'Como a Bússola Funciona';
|
| 3 |
?>
|
Player com controles próprios
O <video> não tem o atributo "controls" — sem ele, o navegador não desenha nenhum controle nativo, e tudo sai pelos botões abaixo. Assistência contínua: sem pausa programada nem pergunta.
| 1 |
<div class="pvs-demo" data-tipo="video-continuo">
|
| 2 |
|
| 3 |
<div class="pvs-cabecalho">
|
| 4 |
<p><?= htmlspecialchars($titulo) ?></p>
|
| 5 |
</div>
|
| 6 |
|
| 7 |
<div class="pvs-player">
|
| 8 |
<!-- Troque pelo caminho do seu vídeo -->
|
| 9 |
<video class="pvs-elemento" src="seu-video.mp4" preload="metadata"></video>
|
| 10 |
</div>
|
| 11 |
|
| 12 |
<div class="pvs-trilha-linha">
|
| 13 |
<span class="pvs-tempo">0:00</span>
|
| 14 |
<div class="pvs-trilha">
|
| 15 |
<div class="pvs-barra"></div>
|
| 16 |
</div>
|
| 17 |
<span class="pvs-duracao">0:00</span>
|
| 18 |
</div>
|
| 19 |
|
| 20 |
<div class="pvs-controles">
|
| 21 |
<button type="button" class="pvs-mudo" aria-label="Mudo">🔊</button>
|
| 22 |
<input type="range" class="pvs-volume" min="0" max="100" value="100">
|
| 23 |
<button type="button" class="pvs-retroceder" aria-label="10 segundos atrás">↺</button>
|
| 24 |
<button type="button" class="pvs-play-pause">Reproduzir</button>
|
| 25 |
<button type="button" class="pvs-avancar" aria-label="10 segundos à frente">↻</button>
|
| 26 |
</div>
|
| 27 |
|
| 28 |
</div>
|
Card e cabeçalho
Contêiner geral e a caixa de título centralizada.
| 1 |
.pvs-demo {
|
| 2 |
max-width: 560px;
|
| 3 |
border: 1px solid #e2e8f0;
|
| 4 |
border-radius: 16px;
|
| 5 |
background: #fff;
|
| 6 |
font-family: sans-serif;
|
| 7 |
overflow: hidden;
|
| 8 |
}
|
| 9 |
|
| 10 |
.pvs-cabecalho {
|
| 11 |
padding: 20px 24px;
|
| 12 |
border-bottom: 1px solid #cbd5e1;
|
| 13 |
background: rgba(241, 245, 249, .6);
|
| 14 |
text-align: center;
|
| 15 |
}
|
| 16 |
|
| 17 |
.pvs-cabecalho p {
|
| 18 |
margin: 0;
|
| 19 |
font-weight: 700;
|
| 20 |
font-size: 18px;
|
| 21 |
color: #0f172a;
|
| 22 |
}
|
Player e trilha
O vídeo preenche a área 16:9; a trilha abaixo mostra o progresso real, sem nenhum marcador (não há pausa programada).
| 1 |
.pvs-player {
|
| 2 |
position: relative;
|
| 3 |
aspect-ratio: 16 / 9;
|
| 4 |
background: #000;
|
| 5 |
}
|
| 6 |
|
| 7 |
.pvs-elemento {
|
| 8 |
width: 100%;
|
| 9 |
height: 100%;
|
| 10 |
display: block;
|
| 11 |
}
|
| 12 |
|
| 13 |
.pvs-trilha-linha {
|
| 14 |
display: flex;
|
| 15 |
align-items: center;
|
| 16 |
gap: 12px;
|
| 17 |
padding: 12px 16px 4px;
|
| 18 |
font-size: 12px;
|
| 19 |
font-family: monospace;
|
| 20 |
color: #64748b;
|
| 21 |
}
|
| 22 |
|
| 23 |
.pvs-trilha {
|
| 24 |
flex: 1;
|
| 25 |
height: 6px;
|
| 26 |
border-radius: 999px;
|
| 27 |
background: #e2e8f0;
|
| 28 |
cursor: pointer;
|
| 29 |
}
|
| 30 |
|
| 31 |
.pvs-barra {
|
| 32 |
height: 100%;
|
| 33 |
width: 0%;
|
| 34 |
border-radius: 999px;
|
| 35 |
background: #6366f1;
|
| 36 |
}
|
Controles
Botão de play/pause central, com retroceder/avançar 10s e volume ao redor — mesma estrutura de três grupos usada no Vídeo Interativo, simplificada aqui numa fileira só.
| 1 |
.pvs-controles {
|
| 2 |
display: flex;
|
| 3 |
align-items: center;
|
| 4 |
justify-content: center;
|
| 5 |
gap: 10px;
|
| 6 |
padding: 4px 16px 16px;
|
| 7 |
}
|
| 8 |
|
| 9 |
.pvs-controles button {
|
| 10 |
border: none;
|
| 11 |
background: none;
|
| 12 |
font-size: 18px;
|
| 13 |
cursor: pointer;
|
| 14 |
color: #475569;
|
| 15 |
}
|
| 16 |
|
| 17 |
.pvs-play-pause {
|
| 18 |
padding: 10px 24px;
|
| 19 |
border-radius: 999px;
|
| 20 |
background: #6366f1;
|
| 21 |
color: #fff;
|
| 22 |
font: inherit;
|
| 23 |
font-size: 14px;
|
| 24 |
font-weight: 600;
|
| 25 |
}
|
| 26 |
|
| 27 |
.pvs-volume {
|
| 28 |
width: 70px;
|
| 29 |
}
|
Controlar o vídeo sem os botões nativos
play(), pause(), currentTime e volume já vêm de graça no elemento <video> — não precisa de nenhuma biblioteca.
| 1 |
document.addEventListener('DOMContentLoaded', function () {
|
| 2 |
var demo = document.querySelector('[data-tipo="video-continuo"]');
|
| 3 |
var video = demo.querySelector('.pvs-elemento');
|
| 4 |
var playPauseBtn = demo.querySelector('.pvs-play-pause');
|
| 5 |
var retroceder = demo.querySelector('.pvs-retroceder');
|
| 6 |
var avancar = demo.querySelector('.pvs-avancar');
|
| 7 |
var mudoBtn = demo.querySelector('.pvs-mudo');
|
| 8 |
var volumeInput = demo.querySelector('.pvs-volume');
|
| 9 |
var trilha = demo.querySelector('.pvs-trilha');
|
| 10 |
var barra = demo.querySelector('.pvs-barra');
|
| 11 |
var tempo = demo.querySelector('.pvs-tempo');
|
| 12 |
var duracaoTexto = demo.querySelector('.pvs-duracao');
|
| 13 |
|
| 14 |
function formatarTempo(segundos) {
|
| 15 |
segundos = Math.max(0, Math.round(segundos));
|
| 16 |
return Math.floor(segundos / 60) + ':' + String(segundos % 60).padStart(2, '0');
|
| 17 |
}
|
Progresso real
"timeupdate" dispara continuamente enquanto o vídeo toca — não existe pausa programada aqui, só atualiza a trilha.
| 1 |
video.addEventListener('loadedmetadata', function () {
|
| 2 |
duracaoTexto.textContent = formatarTempo(video.duration);
|
| 3 |
});
|
| 4 |
|
| 5 |
video.addEventListener('timeupdate', function () {
|
| 6 |
var duracao = video.duration || 0;
|
| 7 |
if (duracao > 0) barra.style.width = (video.currentTime / duracao * 100) + '%';
|
| 8 |
tempo.textContent = formatarTempo(video.currentTime);
|
| 9 |
});
|
Play, pausa e busca de posição
O botão único alterna reproduzir/pausar; a trilha aceita clique direto pra pular pra qualquer ponto.
| 1 |
playPauseBtn.addEventListener('click', function () {
|
| 2 |
if (video.paused) { video.play(); playPauseBtn.textContent = 'Pausar'; }
|
| 3 |
else { video.pause(); playPauseBtn.textContent = 'Reproduzir'; }
|
| 4 |
});
|
| 5 |
|
| 6 |
retroceder.addEventListener('click', function () {
|
| 7 |
video.currentTime = Math.max(0, video.currentTime - 10);
|
| 8 |
});
|
| 9 |
|
| 10 |
avancar.addEventListener('click', function () {
|
| 11 |
video.currentTime = Math.min(video.duration || 0, video.currentTime + 10);
|
| 12 |
});
|
| 13 |
|
| 14 |
trilha.addEventListener('click', function (evento) {
|
| 15 |
var rect = trilha.getBoundingClientRect();
|
| 16 |
var razao = Math.min(1, Math.max(0, (evento.clientX - rect.left) / rect.width));
|
| 17 |
video.currentTime = razao * (video.duration || 0);
|
| 18 |
});
|
Volume
O botão de mudo e o slider ficam em sincronia — mexer num atualiza o outro.
| 1 |
mudoBtn.addEventListener('click', function () {
|
| 2 |
video.muted = !video.muted;
|
| 3 |
mudoBtn.textContent = video.muted ? '🔇' : '🔊';
|
| 4 |
});
|
| 5 |
|
| 6 |
volumeInput.addEventListener('input', function () {
|
| 7 |
var valor = parseInt(volumeInput.value, 10) / 100;
|
| 8 |
video.volume = valor;
|
| 9 |
video.muted = valor === 0;
|
| 10 |
mudoBtn.textContent = video.muted ? '🔇' : '🔊';
|
| 11 |
});
|