<video src="meu-video.mp4" controls width="640" height="360" poster="capa-video.jpg">
    <!-- Texto de fallback caso o navegador seja antigo -->
    Seu navegador não possui suporte para reprodução de vídeo nativo em HTML5.
</video>

<video controls width="800" height="450" poster="capa.webp" preload="metadata">
    <!-- Formato moderno WebM (VP9/Opus): Super leve para Chrome/Firefox/Edge -->
    <source src="video-aula.webm" type="video/webm; codecs=vp9,opus">
    
    <!-- Formato padrão universal MP4 (H.264/AAC): Funciona em 100% dos dispositivos -->
    <source src="video-aula.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
 
    <!-- Fallback amigável com link de download direto -->
    <p>Seu navegador não suporta este vídeo. <a href="video-aula.mp4" download>Baixe o arquivo aqui</a>.</p>
</video>

<video controls width="720" height="405">
    <source src="apresentacao.mp4" type="video/mp4">
 
    <!-- Legendas em Português ativas por padrão -->
    <track kind="subtitles" src="legendas-pt.vtt" srclang="pt-BR" label="Português" default>
    
    <!-- Legendas em Inglês como opção alternativa -->
    <track kind="subtitles" src="legendas-en.vtt" srclang="en" label="English">
</video>

WEBVTT - Legendas da Aula de HTML5
 
00:00:01.000 --> 00:00:04.500
Olá, boas-vindas à Web Academy do Web-ZoneWare!
 
00:00:05.000 --> 00:00:09.200
Hoje aprenderemos a incorporar vídeos nativos com a tag <video>.

const player = document.querySelector('video');
 
// 1. Métodos de Ação
function alternarReproducao() {
    if (player.paused) {
        player.play(); // Inicia a reprodução
    } else {
        player.pause(); // Pausa a reprodução
    }
}
 
// 2. Modificação de Velocidade (0.5x, 1.0x, 1.5x, 2.0x)
player.playbackRate = 1.5;
 
// 3. Ativação do modo Picture-in-Picture (PiP)
if (document.pictureInPictureEnabled) {
    player.requestPictureInPicture();
}
 
// 4. Escuta de Eventos de Progresso
player.addEventListener('timeupdate', () => {
    const porcentagem = (player.currentTime / player.duration) * 100;
    console.log(`Progresso do vídeo: ${porcentagem.toFixed(1)}%`);
});
 
// 5. Ação ao finalizar
player.addEventListener('ended', () => {
    console.log('O vídeo foi concluído!');
});

<div class="wzw-video-player">
    <video id="videoDemo" poster="https://webzoneware.com/wp-content/themes/astra-child/assets/images/logo.png" preload="metadata">
        <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
        Seu navegador não suporta a tag video.
    </video>
 
    <div class="player-controls">
        <button id="btnPlayPause" class="btn-ctrl">▶ Play</button>
        <div class="progress-bar-container">
            <div id="barraProgresso" class="progress-bar-fill"></div>
        </div>
        <span id="tempoDisplay" class="time-label">00:00</span>
        <button id="btnVelocidade" class="btn-ctrl">1.0x</button>
    </div>
</div>

.wzw-video-player {
    max-width: 680px;
    background-color: #0b1120;
    border: 1px solid #1e293b;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
 
.wzw-video-player video {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    background-color: #000;
}
 
.player-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background-color: #0f172a;
    border-top: 1px solid #1e293b;
}
 
.btn-ctrl {
    background-color: #1e293b;
    color: #f8fafc;
    border: 1px solid #334155;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
}
 
.btn-ctrl:hover {
    background-color: #334155;
}
 
.progress-bar-container {
    flex: 1;
    height: 8px;
    background-color: #334155;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
}
 
.progress-bar-fill {
    width: 0%;
    height: 100%;
    background-color: #10b981;
    transition: width 0.1s linear;
}
 
.time-label {
    font-family: monospace;
    font-size: 0.85rem;
    color: #94a3b8;
}

const vid = document.getElementById('videoDemo');
const btnPlay = document.getElementById('btnPlayPause');
const barra = document.getElementById('barraProgresso');
const lblTempo = document.getElementById('tempoDisplay');
const btnVel = document.getElementById('btnVelocidade');
 
// Alterna Play / Pause
btnPlay.addEventListener('click', () => {
    if (vid.paused) {
        vid.play();
        btnPlay.textContent = '⏸ Pausar';
    } else {
        vid.pause();
        btnPlay.textContent = '▶ Play';
    }
});
 
// Atualiza a barra de progresso em tempo real
vid.addEventListener('timeupdate', () => {
    const porcentagem = (vid.currentTime / vid.duration) * 100;
    barra.style.width = `${porcentagem}%`;
 
    const mins = Math.floor(vid.currentTime / 60);
    const segs = Math.floor(vid.currentTime % 60);
    lblTempo.textContent = `${String(mins).padStart(2, '0')}:${String(segs).padStart(2, '0')}`;
});
 
// Alternador de velocidade (1x -> 1.5x -> 2x -> 1x)
const velocidades = [1.0, 1.5, 2.0];
let indiceVel = 0;
btnVel.addEventListener('click', () => {
    indiceVel = (indiceVel + 1) % velocidades.length;
    vid.playbackRate = velocidades[indiceVel];
    btnVel.textContent = `${velocidades[indiceVel].toFixed(1)}x`;
});