# Matinê Player com barra de progresso, miniatura ao passar o mouse, capítulos, legendas, velocidade e tela cheia. > Matinê é um componente exclusivo do THM Componentes com os controles de um player moderno: barra com miniatura ao passar o mouse e capítulos, velocidade de 0,5x a 2x, volume, legendas, tela cheia, picture-in-picture quando disponível e atalhos de teclado. O filme de demonstração, de 45 segundos, é desenhado em canvas, sem arquivo de vídeo. - Categoria: Imagem e mídia - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Canvas 2D - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/matine/ ## Como ele é Parece o player de uma grande plataforma de vídeo, com cantos arredondados. Antes do play, mostra um quadro da abertura e um botão redondo no centro. Na base, uma faixa escura reúne a barra de progresso, com degradê de índigo a ciano e pontinhos nos capítulos, e os botões de tocar, volume, tempo, nome do capítulo, velocidade, legendas e tela cheia. Ao passar o mouse na barra, aparece uma miniatura do quadro com o tempo e o capítulo. Durante a reprodução, os controles somem depois de alguns segundos sem movimento e voltam quando o mouse se mexe. ## Você pode estar procurando isto se pediu algo assim - “player de vídeo bonito com miniatura quando passo na barra” - “vídeo institucional com capítulos e legendas no site” - “player igual ao das plataformas de vídeo, com atalhos de teclado” - “controles de vídeo que somem sozinhos durante a reprodução” - “player acessível com legenda e velocidade para curso online” - “demonstração do produto em vídeo no topo da página de vendas” ## Também chamado de video player, player de vídeo, custom video player, player personalizado, controles de vídeo, player com capítulos, thumbnail preview ## Quando usar - Vídeo institucional ou manifesto de marca na página inicial - Demonstração de produto com capítulos para pular direto a cada recurso - Aulas e cursos que precisam de velocidade, legendas e atalhos - Protótipo de produto de vídeo antes de ter os arquivos finais ## Quando evitar - Quando você precisa tocar o seu arquivo de vídeo sem adaptar o componente - Vídeos de fundo decorativos, em que controles completos são exagero ## Como pedir para a sua IA ```text Crie um player de vídeo personalizado em Vue com barra de progresso, miniatura ao passar o mouse, capítulos, legendas, velocidade, volume e tela cheia. Quero atalhos de teclado, controles acessíveis para leitor de tela e controles que não se escondem para quem prefere menos movimento. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Matinê ### Matinê toca o meu arquivo de vídeo? Não diretamente. Matinê vem com um filme de demonstração de 45 segundos, desenhado quadro a quadro em canvas, em cinco cenas, com trilha sintetizada após o primeiro clique. Para tocar um vídeo seu, peça à IA que adapte o componente a um elemento de vídeo, aproveitando a barra, os capítulos, as legendas e os atalhos. ### Quais atalhos de teclado Matinê aceita? Matinê responde a Espaço ou K para tocar e pausar, setas para os lados para voltar e avançar 5 segundos, setas para cima e para baixo para o volume, F para tela cheia, M para mudo e C para legendas. A barra de progresso também aceita Home e End e anuncia tempo e capítulo ao leitor de tela. ### Matinê respeita quem prefere menos movimento? Sim, no que depende da interface. Com a redução de movimento ativada no sistema, Matinê deixa de esconder os controles durante a reprodução e remove as transições dos botões. O filme só se move quando a pessoa aperta play, então não há animação automática ao abrir a página. ## Componentes relacionados - [Sarau](https://vibecode.thmtecnologia.com/componentes/sarau/): Player de podcast com capítulos na barra e uma transcrição que destaca e rola a frase que está tocando. - [Película](https://vibecode.thmtecnologia.com/componentes/pelicula/): Linha do tempo de edição com clipes que você arrasta, apara e divide, e um preview que mostra o resultado na hora. - [Maquete](https://vibecode.thmtecnologia.com/componentes/maquete/): Um produto desenhado em tempo real que gira, se separa em peças e volta a se montar conforme você rola. - [Postigo](https://vibecode.thmtecnologia.com/componentes/postigo/): Uma janela do Safari desenhada em SVG, com barra de endereço e o print do seu site ocupando a página. - [Pandeiro](https://vibecode.thmtecnologia.com/componentes/pandeiro/): Um disco cercado de barras que dançam com o som, ou linhas em ondas, tocando um som ambiente ou ouvindo o microfone. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.