devlog.blog

💸 Como Exibir um Anúncio Antes do Vídeo Usando React (Estilo YouTube)

💸 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:

  1. Exibe o vídeo do anúncio primeiro
  2. Ao finalizar, carrega o vídeo principal automaticamente
  3. Usa useRef, useState e useEffect para controlar o comportamento

🛠️ Código Comentado em React

🎯 Explicando o Código

ParteO que faz
useStateControla se estamos no anúncio ou vídeo principal
useRefReferencia diretamente o elemento <video>
useEffectEscuta o evento ended para saber quando o vídeo terminou
src dinâmicoTroca 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! 🚀

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *