> ## 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.

# Creación de anuncios de vídeo

export const LastUpdatedEs = ({date}) => {
  const label = "Última actualización:";
  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'}}>
  Los anuncios de vídeo son un formato nuevo diseñado para mejorar la experiencia de marca y producto del anunciante.
</div>

## Cómo funciona

<div style={{textAlign: 'justify', marginBottom: '1.5rem'}}>
  El proceso de creación de la campaña es similar al de los [anuncios de banner](/es/knowledge-base/ad-platform/banners/banner-ads-campaigns/):
</div>

<Steps>
  <Step title="Sube un vídeo" />

  <Step title="Seleccione una ranura" />

  <Step title="Definir ubicaciones/contexto (automático, categoría, búsqueda)" />

  <Step title="Defina los detalles de la campaña: nombre, presupuesto y duración." />
</Steps>

<Note>Los vídeos subidos por los vendedores requieren la aprobación del administrador del mercado.</Note>

## Requisitos de vídeo

* **Duración**: de 6 a 20 segundos (se recomienda menos de 20 segundos)
* **Formatos**: MP4 o MOV
* **Tamaño máximo**: 200 MB

## Flujo de subasta

Durante una solicitud de subasta, los mercados deben enviar el ID del espacio y pueden incluir información contextual (p. ej., categoría, palabras clave). La respuesta de la subasta devolverá el vídeo URL para su reproducción.

### Ejemplo de respuesta a la subasta

```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
}
```

La respuesta incluye un manifiesto HLS URL (`.m3u8`) que se puede representar con cualquier reproductor de vídeo compatible con HLS.

## Opciones de integración de vídeo

### Utiliza tu propio reproductor de vídeo

Los anuncios de vídeo de Topsort son compatibles con todos los reproductores que admiten los formatos **HLS** y **DASH**. A continuación se muestran ejemplos de implementación para cada plataforma.

#### Implementación 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>
```

#### Implementación en 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
    }
}
```

#### Implementación en 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 obtener documentación detallada sobre el reproductor, consulte:

* [Guía del reproductor web](https://developers.cloudflare.com/stream/viewing-videos/using-own-player/web/)
* [Guía de AVPlayer para iOS](https://developers.cloudflare.com/stream/viewing-videos/using-own-player/ios/)
* [Guía de Android ExoPlayer](https://developers.cloudflare.com/stream/viewing-videos/using-own-player/android/)

## Informes y métricas

Topsort realiza un seguimiento de las impresiones y clics de vídeo utilizando [banners.js](http://localhost:4321/ad-platform/banners/bannersjs/).

### Seguimiento de impresiones

* **Impresión visible (estándar IAB/MRC)**: 50 % de los píxeles en el campo de visión durante más de 2 segundos consecutivos
* **Impresión de interacción**: Vídeo visto durante al menos 5 segundos
* Utilice el `resolvedBidId` de la respuesta de la subasta al informar sobre eventos.

### Estándares de atribución y facturación

Según las directrices de medición de medios minoristas de IAB/MRC, Topsort utiliza **Impresiones visibles** (estándar IAB/MRC) para:

* **Atribución de resultados**: Solo las impresiones que cumplan con los estándares de visibilidad del MRC (50 % de los píxeles visibles durante más de 2 segundos) son elegibles para la atribución.
* **Facturación de campañas**: A los anunciantes se les cobra en función de las impresiones visibles.
* **Informes de rendimiento**: Métricas principales y cálculos de ROAS basados en impresiones visibles

**Note**: Las impresiones de interacción (5+ segundos vistos) están disponibles como una métrica de interacción adicional, pero NO se utilizan para fines de atribución o facturación.

### Seguimiento de clics

* Informar sobre los eventos de clic cuando los usuarios interactúan con el vídeo
* Incluye el `resolvedBidId` para atribuir correctamente el clic.
* Navegue a la página del proveedor/producto correspondiente después de informar

### Consideraciones importantes

* **Requisitos de reproducción automática**: Los vídeos deben estar silenciados para que se reproduzcan automáticamente en la mayoría de los navegadores.
* **Reproducción en bucle**: Los vídeos deben reproducirse en bucle continuamente mientras estén en visualización.
* **Optimización para móviles**: Usa el atributo `playsinline` para evitar la pantalla completa en iOS
* **Rendimiento**: Considere la carga diferida para los vídeos que se encuentran debajo del pliegue.

Los marketplaces también pueden configurar la lógica de informes de impresiones y clics personalizada según sea necesario.

## Preguntas frecuentes

1. **¿Cuáles son los ajustes de subida recomendados para vídeos?**

* Contenedores MP4, códec de audio AAC, códec de vídeo H264, 30 fotogramas por segundo o menos
* El comando moov atom debe estar al principio del archivo (Inicio rápido)
* Escaneo progresivo H264 (sin entrelazado)
* Perfil alto H264
* Cerrado GOP
* El contenido debe codificarse y subirse a la misma velocidad frame a la que se grabó
* Audio mono o estéreo (la transmisión mezclará las pistas de audio con más de 2 canales a estéreo)

2. **¿En qué navegadores funciona Stream?**

* Puedes integrar el reproductor de Stream en las siguientes plataformas:

  <table><tbody><tr><td><p><strong>Navegador</strong></p></td><td><p><strong>Version</strong></p></td></tr><tr><td><p>Chrome</p></td><td><p>Supported since Chrome version 88+</p></td></tr><tr><td><p>Firefox</p></td><td><p>Supported since Firefox version 87+</p></td></tr><tr><td><p>Edge</p></td><td><p>Supported since Edge 89+</p></td></tr><tr><td><p>Safari</p></td><td><p>Supported since Safari version 14+</p></td></tr><tr><td><p>Opera</p></td><td><p>Supported since Opera version 75+</p></td></tr></tbody></table>

  <table><tbody><tr><td><p><strong>Plataforma móvil</strong></p></td><td><p><strong>Version</strong></p></td></tr><tr><td><p>Chrome on Android</p></td><td><p>Supported on Chrome 90</p></td></tr><tr><td><p>UC Browser on Android</p></td><td><p>Supported on version 12.12+</p></td></tr><tr><td><p>Samsung Internet</p></td><td><p>Supported on 13+</p></td></tr><tr><td><p>Safari on iOS</p></td><td><p>Supported on iOS 13.4+. Speed selector supported when not in fullscreen.</p></td></tr></tbody></table>

***

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