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

# Erstellung von Videoanzeigen

export const LastUpdatedDe = ({date}) => {
  const label = "Zuletzt aktualisiert:";
  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'}}>
  Videoanzeigen sind ein neues Format, das entwickelt wurde, um die Marken- und Produkterfahrung des Werbetreibenden zu verbessern.
</div>

## Wie es funktioniert

<div style={{textAlign: 'justify', marginBottom: '1.5rem'}}>
  Der Kampagnenerstellungsprozess ist ähnlich wie bei [Banner-Anzeigen](/de/knowledge-base/ad-platform/banners/banner-ads-campaigns/):
</div>

<Steps>
  <Step title="Video hochladen" />

  <Step title="Platzierung auswählen" />

  <Step title="Platzierungen/Kontext definieren (automatisch, Kategorie, Suche)" />

  <Step title="Kampagnendetails festlegen: Name, Budget und Laufzeit" />
</Steps>

<Note>Von Verkäufern hochgeladene Videos erfordern die Genehmigung des Marketplace-Administrators.</Note>

## Videoanforderungen

* **Länge**: 6-20 Sekunden (unter 20s empfohlen)
* **Formate**: MP4 oder MOV
* **Maximale Größe**: 200 MB

## Auktionsablauf

Bei einer Auktionsanfrage müssen Marketplaces die Platzierungs-ID senden und können Kontextinformationen (z.B. Kategorie, Schlüsselwörter) einschließen. Die Auktionsantwort gibt die Video-URL zum Rendern zurück.

### Beispiel-Auktionsantwort

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

Die Antwort enthält eine HLS-Manifest-URL (`.m3u8`), die mit jedem HLS-kompatiblen Videoplayer gerendert werden kann.

## Video-Integrationsoptionen

### Verwenden Sie Ihren eigenen Videoplayer

Videoanzeigen von Topsort sind mit allen Playern kompatibel, die **HLS**- und **DASH**-Formate unterstützen. Hier sind Implementierungsbeispiele für jede Plattform.

#### Web-Implementierung

```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>
// HLS.js für bessere Browser-Unterstützung initialisieren
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-Unterstützung (Safari)
  video.src = 'YOUR_VIDEO_URL_HERE';
}

// Impressions verfolgen (50% sichtbar für 2+ Sekunden)
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.intersectionRatio >= 0.5) {
      setTimeout(() => {
        if (entry.intersectionRatio >= 0.5) {
          // Impression melden
          window.topsortEvents.reportEvent({
            type: 'impression',
            resolvedBidId: 'YOUR_RESOLVED_BID_ID'
          });
        }
      }, 2000);
    }
  });
}, { threshold: 0.5 });

observer.observe(video);

// Klicks behandeln
video.addEventListener('click', () => {
  window.topsortEvents.reportEvent({
    type: 'click',
    resolvedBidId: 'YOUR_RESOLVED_BID_ID'
  });
  // Zur Verkäufer-/Produktseite navigieren
});
</script>
```

#### iOS-Implementierung (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 }

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

        // Für Autoplay konfigurieren
        player?.isMuted = true
        player?.play()

        // Video in Schleife abspielen
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(playerDidFinishPlaying),
            name: .AVPlayerItemDidPlayToEndTime,
            object: player?.currentItem
        )

        // Tap-Geste für Klicks hinzufügen
        let tap = UITapGestureRecognizer(target: self, action: #selector(handleTap))
        addGestureRecognizer(tap)
    }

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

    @objc private func handleTap() {
        // Klick-Event über Topsort SDK melden
    }
}
```

#### Android-Implementierung (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  // Schleife
            volume = 0f  // Stummgeschaltet für Autoplay
            prepare()
            play()
        }

        player = exoPlayer
        useController = false  // Steuerelemente ausblenden

        // Klicks behandeln
        setOnClickListener {
            // Klick über Topsort SDK melden
        }
    }
}
```

Für detaillierte Player-Dokumentation siehe:

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

## Reporting und Metriken

Topsort verfolgt Video-Impressions und -Klicks mit [banners.js](http://localhost:4321/ad-platform/banners/bannersjs/).

### Impressions-Tracking

* **Sichtbare Impression (IAB/MRC-Standard)**: 50% der Pixel sichtbar für 2+ aufeinanderfolgende Sekunden
* **Engagement-Impression**: Video für mindestens 5 Sekunden angesehen
* Verwenden Sie die `resolvedBidId` aus der Auktionsantwort beim Melden von Events

### Attributions- und Abrechnungsstandards

Gemäß den IAB/MRC Retail Media Measurement Guidelines verwendet Topsort **Sichtbare Impressions** (IAB/MRC-Standard) für:

* **Ergebniszuordnung**: Nur Impressions, die MRC-Sichtbarkeitsstandards erfüllen (50% der Pixel sichtbar für 2+ Sekunden), sind für Attribution berechtigt
* **Kampagnenabrechnung**: Werbetreibende werden basierend auf sichtbaren Impressions abgerechnet
* **Leistungsberichte**: Primäre Metriken und ROAS-Berechnungen basieren auf sichtbaren Impressions

**Hinweis**: Engagement-Impressions (5+ Sekunden angesehen) sind als zusätzliche Engagement-Metrik verfügbar, werden aber NICHT für Attributions- oder Abrechnungszwecke verwendet.

### Klick-Tracking

* Klick-Events melden, wenn Benutzer mit dem Video interagieren
* `resolvedBidId` einschließen, um Klicks korrekt zuzuordnen
* Nach Meldung zur entsprechenden Verkäufer-/Produktseite navigieren

### Wichtige Überlegungen

* **Autoplay-Anforderungen**: Videos müssen für Autoplay auf den meisten Browsern stummgeschaltet sein
* **Schleifenwiedergabe**: Videos sollten kontinuierlich in Schleife abgespielt werden, wenn sichtbar
* **Mobile Optimierung**: `playsinline`-Attribut verwenden, um Vollbild auf iOS zu vermeiden
* **Leistung**: Lazy Loading für Videos unter dem Fold in Betracht ziehen

Marketplaces können auch benutzerdefinierte Impressions- und Klick-Reporting-Logik nach ihren Bedürfnissen konfigurieren.

## Häufig gestellte Fragen

1. **Was sind die empfohlenen Upload-Einstellungen für Video-Uploads?**

   * MP4-Container, AAC-Audio-Codec, H264-Video-Codec, 30 Bilder pro Sekunde oder weniger
   * Moov-Atom muss am Anfang der Datei sein (Fast Start)
   * H264 Progressive Scan (kein Interlacing)
   * H264 High Profile
   * Geschlossener GOP
   * Inhalt sollte mit derselben Bildrate kodiert und hochgeladen werden, mit der er aufgenommen wurde
   * Audio mono oder stereo (Stream mischt Audiospuren mit mehr als 2 Kanälen zu Stereo)

2. **Auf welchen Browsern funktioniert Stream?**

   * Sie können den Stream-Player auf folgenden Plattformen einbetten:

     <table><tbody><tr><td><p><strong>Browser</strong></p></td><td><p><strong>Version</strong></p></td></tr><tr><td><p>Chrome</p></td><td><p>Unterstützt ab Chrome Version 88+</p></td></tr><tr><td><p>Firefox</p></td><td><p>Unterstützt ab Firefox Version 87+</p></td></tr><tr><td><p>Edge</p></td><td><p>Unterstützt ab Edge 89+</p></td></tr><tr><td><p>Safari</p></td><td><p>Unterstützt ab Safari Version 14+</p></td></tr><tr><td><p>Opera</p></td><td><p>Unterstützt ab Opera Version 75+</p></td></tr></tbody></table>

     <table><tbody><tr><td><p><strong>Mobile Plattform</strong></p></td><td><p><strong>Version</strong></p></td></tr><tr><td><p>Chrome auf Android</p></td><td><p>Unterstützt auf Chrome 90</p></td></tr><tr><td><p>UC Browser auf Android</p></td><td><p>Unterstützt auf Version 12.12+</p></td></tr><tr><td><p>Samsung Internet</p></td><td><p>Unterstützt auf 13+</p></td></tr><tr><td><p>Safari auf iOS</p></td><td><p>Unterstützt auf iOS 13.4+. Geschwindigkeitsauswahl außerhalb des Vollbilds unterstützt.</p></td></tr></tbody></table>

***

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