💸 Como Exibir um Anúncio Antes do Vídeo Usando React (Estilo YouTube)
✨ Introdução
Você já acessou o YouTube e teve que ver aquele anúncio antes do vídeo principal?
Pois é, aquilo se chama pré-roll ad, e a boa notícia é: você também pode implementar isso em React!
Se você está criando uma:
- Plataforma de vídeos
- Aplicativo de cursos
- Site de streaming com monetização
…então aprender a exibir um anúncio antes do vídeo principal é essencial.
Neste guia você vai aprender:
- Como estruturar essa lógica em React
- Como trocar o vídeo automaticamente
- Como exibir anúncios de forma fluida e sem plugins pesados
Vamos monetizar sua plataforma? 💰🚀
🧠 O que é um Anúncio Pré-Roll?
Um pré-roll ad é um anúncio em vídeo que toca antes do conteúdo principal.
Usado em:
- YouTube
- TikTok
- Apps de cursos (Hotmart, Eduzz)
- Sites de streaming gratuito
Por que usar?
- Monetiza com parceiros ou patrocinadores
- Promove seu próprio conteúdo/produto
- Aumenta retenção com campanhas visuais curtas
📦 O Projeto: Carregando um anúncio antes do vídeo principal
Vamos criar um componente React chamado VideoPlayerComAnuncio
, que:
- Exibe o vídeo do anúncio primeiro
- Ao finalizar, carrega o vídeo principal automaticamente
- Usa
useRef
,useState
euseEffect
para controlar o comportamento
🛠️ Código Comentado em React

🎯 Explicando o Código
Parte | O que faz |
---|---|
useState | Controla se estamos no anúncio ou vídeo principal |
useRef | Referencia diretamente o elemento <video> |
useEffect | Escuta o evento ended para saber quando o vídeo terminou |
src dinâmico | Troca automaticamente o vídeo sem recarregar o componente |
🧪 O que mais você pode fazer?
- Desabilitar o botão de pular até X segundos (com
setTimeout
) - Integrar com sistemas de anúncios pagos
- Exibir contagem regressiva do anúncio
- Salvar no banco se o usuário viu ou pulou
Se quiser um post só sobre isso, posso montar também! 🎯
📣 Conclusão: Monetize sua Plataforma de Vídeos com React
Você acabou de criar sua própria lógica de anúncios em vídeo com React, sem precisar de bibliotecas externas ou players complicados.
Esse padrão é:
- Leve ✅
- Eficiente ✅
- Fácil de personalizar ✅
💡 Comece agora adaptando esse componente para sua aplicação real e… quem sabe, já oferecendo espaço para o primeiro patrocinador?
E se quiser ver como criar uma plataforma de vídeos com login e painel de controle em React, deixa um comentário ou me chama — esse pode ser o próximo passo da sua aplicação! 🚀