> ## Documentation Index
> Fetch the complete documentation index at: https://docs.topsort.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Creação de anúncios de vídeo

export const LastUpdatedPt = ({date}) => {
  const label = "Última atualização:";
  return <>
      <style>{`
        .last-updated-component {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 10px 16px;
          border-radius: 8px;
          margin-top: 12px;
          margin-bottom: 16px;
          font-size: 14px;
          background-color: rgba(0, 0, 0, 0.05);
          border: 1px solid rgba(0, 0, 0, 0.12);
          color: rgba(0, 0, 0, 0.75);
          line-height: 1;
        }

        .last-updated-component svg {
          flex-shrink: 0;
          vertical-align: middle;
        }

        .last-updated-component span {
          display: inline-flex !important;
          align-items: center !important;
          line-height: 1 !important;
        }

        [data-theme="dark"] .last-updated-component {
          background-color: #3a3a3a;
          border: 2px solid #888888;
          color: #ffffff;
        }

        [data-theme="dark"] .last-updated-component svg {
          stroke: #ffffff;
        }
      `}</style>
      <div className="last-updated-component">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="10" />
          <polyline points="12 6 12 12 16 14" />
        </svg>
        <span>
          <strong style={{
    fontWeight: 600
  }}>{label}</strong> 
          <time dateTime={date}>{date}</time>
        </span>
      </div>
    </>;
};

<div style={{textAlign: 'justify', marginBottom: '1.5rem'}}>
  Os anúncios de vídeo são um formato novo projetado para melhorar a experiência de marca e produto do anunciante.
</div>

## Como Funciona

<div style={{textAlign: 'justify', marginBottom: '1.5rem'}}>
  O processo de criação da campanha é similar ao dos [anúncios de banner](/pt/knowledge-base/ad-platform/banners/banner-ads-campaigns/):
</div>

<Steps>
  <Step title="Faça upload de um vídeo" />

  <Step title="Selecione um espaço" />

  <Step title="Definir posicionamentos/contexto (automático, categoria, busca)" />

  <Step title="Defina os detalhes da campanha: nome, orçamento e duração." />
</Steps>

<Note>Os vídeos enviados pelos fornecedores requerem a aprovação do administrador do marketplace.</Note>

## Requisitos de vídeo

* **Duração**: de 6 a 20 segundos (recomenda-se menos de 20 segundos)
* **Formatos**: MP4 ou MOV
* **Tamanho máximo**: 200 MB

## Fluxo do leilão

Durante uma solicitação de leilão, os marketplaces devem enviar o ID do espaço e podem incluir informações contextuais (p. ex., categoria, palavras-chave). A resposta do leilão retornará a URL do vídeo para sua reprodução.

### Exemplo de resposta do leilão

```json theme={null}
{
  "resultType": "banners",
  "winners": [
    {
      "rank": 1,
      "asset": [
        {
          "url": "https://customer-axfyyvfgsfxowp1c.cloudflarestream.com/6541f123389a4796889166a2b9491f09/manifest/video.m3u8"
        }
      ],
      "type": "vendor",
      "id": "972776",
      "resolvedBidId": "ChAGjBuGm-lyS6oE7YQebGh-EhABmTSoITB38Z2Nmqd_rVLpGhABmTLlo1V1wJNc17VoVGUKIgoKBjk3Mjc3NhADMJTpbDoBAUAFSAJQx7rhpZMz",
      "vendorId": "972776",
      "campaignId": "019934a8-2130-77f1-9d8d-9aa77fad52e9"
    }
  ],
  "error": false
}
```

A resposta inclui uma URL de manifesto HLS (`.m3u8`) que pode ser renderizada com qualquer reprodutor de vídeo compatível com HLS.

## Opções de integração de vídeo

### Use seu próprio reprodutor de vídeo

Os anúncios de vídeo de Topsort são compatíveis com todos os reprodutores que suportam os formatos **HLS** e **DASH**. Abaixo estão exemplos de implementação para cada plataforma.

#### Implementação web

```html theme={null}
<video id="video-ad" muted autoplay loop playsinline style="width: 100%; max-width: 640px;">
  <source src="YOUR_VIDEO_URL_HERE" type="application/x-mpegURL">
</video>

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
// Initialize HLS.js for better browser support
const video = document.getElementById('video-ad');
if (Hls.isSupported()) {
  const hls = new Hls();
  hls.loadSource('YOUR_VIDEO_URL_HERE');
  hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  // Native HLS support (Safari)
  video.src = 'YOUR_VIDEO_URL_HERE';
}

// Track impressions (50% visible for 2+ seconds)
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.intersectionRatio >= 0.5) {
      setTimeout(() => {
        if (entry.intersectionRatio >= 0.5) {
          // Report impression
          window.topsortEvents.reportEvent({
            type: 'impression',
            resolvedBidId: 'YOUR_RESOLVED_BID_ID'
          });
        }
      }, 2000);
    }
  });
}, { threshold: 0.5 });

observer.observe(video);

// Handle clicks
video.addEventListener('click', () => {
  window.topsortEvents.reportEvent({
    type: 'click',
    resolvedBidId: 'YOUR_RESOLVED_BID_ID'
  });
  // Navigate to vendor/product page
});
</script>
```

#### Implementação em iOS (Swift)

```swift theme={null}
import AVKit
import UIKit

class VideoAdView: UIView {
    private var player: AVPlayer?
    private var playerLayer: AVPlayerLayer?

    func loadVideo(url: String, resolvedBidId: String) {
        guard let videoURL = URL(string: url) else { return }

        // Setup player
        player = AVPlayer(url: videoURL)
        playerLayer = AVPlayerLayer(player: player)
        playerLayer?.frame = bounds
        playerLayer?.videoGravity = .resizeAspectFill
        layer.addSublayer(playerLayer!)

        // Configure for autoplay
        player?.isMuted = true
        player?.play()

        // Loop video
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(playerDidFinishPlaying),
            name: .AVPlayerItemDidPlayToEndTime,
            object: player?.currentItem
        )

        // Add tap gesture for clicks
        let tap = UITapGestureRecognizer(target: self, action: #selector(handleTap))
        addGestureRecognizer(tap)
    }

    @objc private func playerDidFinishPlaying() {
        player?.seek(to: .zero)
        player?.play()
    }

    @objc private func handleTap() {
        // Report click event via Topsort SDK
    }
}
```

#### Implementação em Android (Kotlin)

```kotlin theme={null}
import com.google.android.exoplayer2.ExoPlayer
import com.google.android.exoplayer2.MediaItem
import com.google.android.exoplayer2.Player

class VideoAdView(context: Context) : PlayerView(context) {
    private var exoPlayer: ExoPlayer? = null

    fun loadVideo(url: String, resolvedBidId: String) {
        exoPlayer = ExoPlayer.Builder(context).build().apply {
            setMediaItem(MediaItem.fromUri(url))
            repeatMode = Player.REPEAT_MODE_ONE  // Loop
            volume = 0f  // Muted for autoplay
            prepare()
            play()
        }

        player = exoPlayer
        useController = false  // Hide controls

        // Handle clicks
        setOnClickListener {
            // Report click via Topsort SDK
        }
    }
}
```

Para obter documentação detalhada sobre o reprodutor, consulte:

* [Guia do reprodutor web](https://developers.cloudflare.com/stream/viewing-videos/using-own-player/web/)
* [Guia do AVPlayer para iOS](https://developers.cloudflare.com/stream/viewing-videos/using-own-player/ios/)
* [Guia do Android ExoPlayer](https://developers.cloudflare.com/stream/viewing-videos/using-own-player/android/)

## Relatórios e métricas

Topsort realiza um acompanhamento das impressões e cliques de vídeo utilizando [banners.js](/pt/knowledge-base/ad-platform/banners/bannersjs/).

### Acompanhamento de impressões

* **Impressão visível (padrão IAB/MRC)**: 50% dos pixels no campo de visão durante mais de 2 segundos consecutivos
* **Impressão de interação**: Vídeo visto durante pelo menos 5 segundos
* Use o `resolvedBidId` da resposta do leilão ao informar sobre eventos.

### Padrões de atribuição e facturação

De acordo com as diretrizes de medição de mídia varejista de IAB/MRC, Topsort utiliza **Impressões visíveis** (padrão IAB/MRC) para:

* **Atribuição de resultados**: Apenas as impressões que cumplan com os padrões de visibilidade do MRC (50 % dos pixels visíveis durante mais de 2 segundos) são elegíveis para a atribuição.
* **Faturamento de campanhas**: A os anunciantes se les cobra en função das impresiones visibles.
* **Relatórios de desempenho**: Métricas principais e cálculos de ROAS baseados em impressões visíveis

**Note**: As impressões de interação (5+ segundos vistos) estão disponíveis como uma métrica de interação adicional, mas NÃO são utilizadas para fins de atribuição ou faturamento.

### Acompanhamento de cliques

* Informe sobre os eventos de clique quando os usuários interagirem com o vídeo
* Inclua o `resolvedBidId` para atribuir corretamente o clique.
* Navegue para a página do fornecedor/produto correspondente após informar

### Considerações importantes

* **Requisitos de reprodução automática**: Os vídeos devem estar silenciados para que se reproduzam automaticamente na maioria dos navegadores.
* **Reprodução em loop**: Os vídeos devem se reproduzir em loop continuamente enquanto estiverem em visualização.
* **Otimização para móveis**: Use o atributo `playsinline` para evitar a tela cheia no iOS
* **Desempenho**: Considere o carregamento tardio (lazy loading) para os vídeos que estão abaixo do dobramento.

Os marketplaces também podem configurar a lógica de relatórios de impressões e cliques personalizada conforme necessário.

## Perguntas frequentes

1. **Quais são as configurações de upload recomendadas para vídeos?**

* Contêineres MP4, codec de áudio AAC, codec de vídeo H264, 30 quadros por segundo ou menos
* O átomo moov deve estar no início do arquivo (Início rápido)
* Varredura progressiva H264 (sem entrelaçamento)
* Perfil alto H264
* GOP fechado
* O conteúdo deve ser codificado e enviado na mesma taxa de quadros em que foi gravado
* Áudio mono ou estéreo (a transmissão misturará as trilhas de áudio com mais de 2 canais para estéreo)

2. **Em quais navegadores o Stream funciona?**

* Você pode integrar o reprodutor do Stream nas seguintes plataformas:

  <table><tbody><tr><td><p><strong>Navegador</strong></p></td><td><p><strong>Versão</strong></p></td></tr><tr><td><p>Chrome</p></td><td><p>Suportado desde Chrome versão 88+</p></td></tr><tr><td><p>Firefox</p></td><td><p>Suportado desde Firefox versão 87+</p></td></tr><tr><td><p>Edge</p></td><td><p>Suportado desde Edge 89+</p></td></tr><tr><td><p>Safari</p></td><td><p>Suportado desde Safari versão 14+</p></td></tr><tr><td><p>Opera</p></td><td><p>Suportado desde Opera versão 75+</p></td></tr></tbody></table>

  <table><tbody><tr><td><p><strong>Plataforma móvel</strong></p></td><td><p><strong>Versão</strong></p></td></tr><tr><td><p>Chrome no Android</p></td><td><p>Suportado no Chrome 90</p></td></tr><tr><td><p>UC Browser no Android</p></td><td><p>Suportado na versão 12.12+</p></td></tr><tr><td><p>Samsung Internet</p></td><td><p>Suportado na versão 13+</p></td></tr><tr><td><p>Safari no iOS</p></td><td><p>Suportado no iOS 13.4+. Seletor de velocidade suportado quando não estiver em tela cheia.</p></td></tr></tbody></table>

***

<LastUpdatedPt date="2025-11-18" />