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

# Création de Publicités Vidéo

export const LastUpdatedFr = ({date}) => {
  const label = "Dernière mise à jour:";
  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'}}>
  Les publicités vidéo sont un nouveau format conçu pour améliorer l'expérience de marque et de produit de l'annonceur.
</div>

## Comment Ça Fonctionne

<div style={{textAlign: 'justify', marginBottom: '1.5rem'}}>
  Le processus de création de campagne est similaire à celui des [bannières publicitaires](/fr/knowledge-base/ad-platform/banners/banner-ads-campaigns/) :
</div>

<Steps>
  <Step title="Télécharger une vidéo" />

  <Step title="Sélectionner un emplacement" />

  <Step title="Définir les placements/contexte (automatique, catégorie, recherche)" />

  <Step title="Définir les détails de la campagne : nom, budget et durée" />
</Steps>

<Note>Les vidéos téléchargées par les vendeurs nécessitent l'approbation de l'administrateur de la marketplace.</Note>

## Exigences Vidéo

* **Durée** : 6 à 20 secondes (moins de 20s recommandé)
* **Formats** : MP4 ou MOV
* **Taille maximale** : 200 Mo

## Flux d'Enchères

Lors d'une requête d'enchères, les marketplaces doivent envoyer l'ID de l'emplacement et peuvent inclure des informations contextuelles (par exemple, catégorie, mots-clés). La réponse d'enchère retournera l'URL de la vidéo pour le rendu.

### Exemple de Réponse d'Enchère

```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 réponse inclut une URL de manifeste HLS (`.m3u8`) qui peut être rendue en utilisant n'importe quel lecteur vidéo compatible HLS.

## Options d'Intégration Vidéo

### Utilisez Votre Propre Lecteur Vidéo

Les publicités vidéo de Topsort sont compatibles avec tous les lecteurs prenant en charge les formats **HLS** et **DASH**. Voici des exemples d'implémentation pour chaque plateforme.

#### Implémentation 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>
// Initialiser HLS.js pour une meilleure prise en charge du navigateur
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')) {
  // Support HLS natif (Safari)
  video.src = 'YOUR_VIDEO_URL_HERE';
}

// Suivre les impressions (50% visible pendant 2+ secondes)
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.intersectionRatio >= 0.5) {
      setTimeout(() => {
        if (entry.intersectionRatio >= 0.5) {
          // Signaler l'impression
          window.topsortEvents.reportEvent({
            type: 'impression',
            resolvedBidId: 'YOUR_RESOLVED_BID_ID'
          });
        }
      }, 2000);
    }
  });
}, { threshold: 0.5 });

observer.observe(video);

// Gérer les clics
video.addEventListener('click', () => {
  window.topsortEvents.reportEvent({
    type: 'click',
    resolvedBidId: 'YOUR_RESOLVED_BID_ID'
  });
  // Naviguer vers la page du vendeur/produit
});
</script>
```

#### Implémentation 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 }

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

        // Configurer pour la lecture automatique
        player?.isMuted = true
        player?.play()

        // Boucler la vidéo
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(playerDidFinishPlaying),
            name: .AVPlayerItemDidPlayToEndTime,
            object: player?.currentItem
        )

        // Ajouter un geste de tap pour les clics
        let tap = UITapGestureRecognizer(target: self, action: #selector(handleTap))
        addGestureRecognizer(tap)
    }

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

    @objc private func handleTap() {
        // Signaler l'événement de clic via le SDK Topsort
    }
}
```

#### Implémentation 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  // Boucle
            volume = 0f  // Muet pour la lecture automatique
            prepare()
            play()
        }

        player = exoPlayer
        useController = false  // Masquer les contrôles

        // Gérer les clics
        setOnClickListener {
            // Signaler le clic via le SDK Topsort
        }
    }
}
```

Pour une documentation détaillée du lecteur, consultez :

* [Guide du Lecteur Web](https://developers.cloudflare.com/stream/viewing-videos/using-own-player/web/)
* [Guide AVPlayer iOS](https://developers.cloudflare.com/stream/viewing-videos/using-own-player/ios/)
* [Guide ExoPlayer Android](https://developers.cloudflare.com/stream/viewing-videos/using-own-player/android/)

## Rapports et Métriques

Topsort suit les impressions et clics vidéo en utilisant [banners.js](http://localhost:4321/ad-platform/banners/bannersjs/).

### Suivi des Impressions

* **Impression Visible (Norme IAB/MRC)** : 50% des pixels visibles pendant 2+ secondes consécutives
* **Impression d'Engagement** : Vidéo regardée pendant au moins 5 secondes
* Utilisez le `resolvedBidId` de la réponse d'enchère lors du signalement des événements

### Normes d'Attribution et de Facturation

Selon les Directives de Mesure des Médias de Vente au Détail IAB/MRC, Topsort utilise les **Impressions Visibles** (Norme IAB/MRC) pour :

* **Attribution des résultats** : Seules les impressions répondant aux normes de visibilité MRC (50% des pixels visibles pendant 2+ secondes) sont éligibles pour l'attribution
* **Facturation de campagne** : Les annonceurs sont facturés en fonction des impressions visibles
* **Rapports de performance** : Métriques primaires et calculs de ROAS basés sur les impressions visibles

**Remarque** : Les impressions d'engagement (5+ secondes regardées) sont disponibles comme métrique d'engagement supplémentaire mais ne sont PAS utilisées à des fins d'attribution ou de facturation.

### Suivi des Clics

* Signalez les événements de clic lorsque les utilisateurs interagissent avec la vidéo
* Incluez le `resolvedBidId` pour attribuer correctement le clic
* Naviguez vers la page appropriée du vendeur/produit après le signalement

### Considérations Importantes

* **Exigences de Lecture Automatique** : Les vidéos doivent être muettes pour la lecture automatique sur la plupart des navigateurs
* **Lecture en Boucle** : Les vidéos doivent être lues en boucle en continu lorsqu'elles sont visibles
* **Optimisation Mobile** : Utilisez l'attribut `playsinline` pour éviter le plein écran sur iOS
* **Performance** : Envisagez le chargement différé pour les vidéos sous le pli

Les marketplaces peuvent également configurer une logique de signalement d'impressions et de clics personnalisée selon leurs besoins.

## Questions Fréquemment Posées

1. **Quels sont les paramètres de téléchargement recommandés pour les téléchargements vidéo ?**

   * Conteneurs MP4, codec audio AAC, codec vidéo H264, 30 images par seconde ou moins
   * L'atome moov doit être au début du fichier (Fast Start)
   * H264 balayage progressif (pas d'entrelacement)
   * Profil élevé H264
   * GOP fermé
   * Le contenu doit être encodé et téléchargé à la même fréquence d'images qu'il a été enregistré
   * Audio mono ou stéréo (Stream mixera les pistes audio avec plus de 2 canaux en stéréo)

2. **Sur quels navigateurs fonctionne Stream ?**

   * Vous pouvez intégrer le lecteur Stream sur les plateformes suivantes :

     <table><tbody><tr><td><p><strong>Navigateur</strong></p></td><td><p><strong>Version</strong></p></td></tr><tr><td><p>Chrome</p></td><td><p>Pris en charge depuis Chrome version 88+</p></td></tr><tr><td><p>Firefox</p></td><td><p>Pris en charge depuis Firefox version 87+</p></td></tr><tr><td><p>Edge</p></td><td><p>Pris en charge depuis Edge 89+</p></td></tr><tr><td><p>Safari</p></td><td><p>Pris en charge depuis Safari version 14+</p></td></tr><tr><td><p>Opera</p></td><td><p>Pris en charge depuis Opera version 75+</p></td></tr></tbody></table>

     <table><tbody><tr><td><p><strong>Plateforme Mobile</strong></p></td><td><p><strong>Version</strong></p></td></tr><tr><td><p>Chrome sur Android</p></td><td><p>Pris en charge sur Chrome 90</p></td></tr><tr><td><p>UC Browser sur Android</p></td><td><p>Pris en charge sur version 12.12+</p></td></tr><tr><td><p>Samsung Internet</p></td><td><p>Pris en charge sur 13+</p></td></tr><tr><td><p>Safari sur iOS</p></td><td><p>Pris en charge sur iOS 13.4+. Sélecteur de vitesse pris en charge en dehors du plein écran.</p></td></tr></tbody></table>

***

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