Kurz gesagt
Am schnellsten und datenschutzfreundlichsten ist das Selbst-Hosten mit dem HTML-Element video, einem Vorschaubild und einer MP4- oder WebM-Datei. Plattform-Videos bettest du mit einer Zwei-Klick-Lösung ein, die erst nach Einwilligung Daten lädt. Das ist allgemeine Information und kein Rechtsrat.
Inhalt8
Selbst hosten mit dem video-Element
HTML kennt dafür das Element video. Du gibst die Datei an, der Browser zeigt den Player. Biete möglichst MP4 an, weil fast alle Browser es abspielen. WebM kann zusätzlich als zweite Quelle dienen. Der Browser nimmt die erste Datei, die er versteht.
Das Attribut poster legt ein Vorschaubild fest. Es erscheint, bevor das Video läuft, und verhindert eine schwarze Fläche. Mit controls zeigst du Bedienelemente. Das Attribut preload steuert, wie viel der Browser vorab lädt: mit metadata lädt er wenig, mit none gar nichts. Für Filme weiter unten auf der Seite spart das Ladezeit.
Achte außerdem auf die Dateigröße. Ein Film, der schon beim Laden der Seite viele Daten zieht, bremst die Seite und kostet Besucher auf dem Handy Geduld. Exportiere deshalb in einer Größe, die zur Anzeige passt, und prüfe die Ladezeit mit einem Messwerkzeug.
Automatisch abspielen: muted und playsinline
Browser blockieren Autoplay mit Ton, weil es Besucher stört. Ein Video startet von allein nur, wenn es stumm ist. Setze dafür muted, bei Bedarf zusätzlich loop. Auf dem iPhone braucht es außerdem playsinline, sonst öffnet sich das Video im Vollbild.
Die Regeln beschreibt das Chrome-Team in seinem Beitrag zu Autoplay. Die Regeln ändern sich gelegentlich, deshalb lohnt der Blick in die Quelle am Ende der Seite. Ein stummer Autoplay-Film braucht Schrift im Bild oder Untertitel, damit er ohne Ton funktioniert.
Biete Besuchern trotzdem die Wahl: Eine sichtbare Schaltfläche für den Ton und für Pause gehört dazu. Wer sich gestört fühlt, soll das Video selbst anhalten können. Das hilft auch bei der Barrierefreiheit.
Plattform einbetten: Datenschutz
Wer ein Video von YouTube oder Vimeo einbettet, bindet fremden Code ein. Beim Laden der Seite können Daten der Besucher an die Plattform fließen. Deshalb gilt in Deutschland und der EU meist: erst nach Einwilligung laden.
Verbreitet ist die Zwei-Klick-Lösung. Zuerst siehst du nur ein Vorschaubild mit Hinweis. Erst nach dem Klick lädt der Player. Die rechtliche Prüfung für deine Seite ersetzt das nicht. Lass sie bei Bedarf von einer Fachperson machen.
Auch bei Plattformen mit erweitertem Datenschutz gilt: Prüfe in den Einstellungen des Anbieters, welche Daten wann geladen werden, und halte es in der Datenschutzerklärung fest. Eine eigene Datei vermeidet diese Frage ganz.
Selbst hosten oder einbetten
Beide Wege haben Folgen für Daten, Technik und Ladezeit:
Mehr zur Entscheidung steht in YouTube oder selbst hosten. Soll der Film auf der Startseite stehen, hilft Video für die Startseite.
Untertitel-Spur und strukturierte Daten
Mit dem Element track hängst du Untertitel als Textdatei an das Video. Besucher schalten sie im Player ein, und Suchmaschinen können den Text lesen. Das Format dafür heißt WebVTT. Mehr dazu unter Untertitel im Video.
Mit strukturierten Daten vom Typ VideoObject sagst du Suchmaschinen, was das Video zeigt, wie lang es ist und wo die Datei liegt. Die Details stehen in VideoObject-Schema.
In fünf Schritten zum eingebundenen Video
So bindest du einen Film selbst gehostet ein:
- Schritt 1:Datei vorbereitenExportiere eine MP4-Datei, optional zusätzlich WebM, in angemessener Dateigröße.
- Schritt 2:Vorschaubild erstellenWähle ein Standbild, das auch ohne Play-Klick Lust aufs Anschauen macht.
- Schritt 3:Element einbauenNutze video mit source, poster, preload und controls. Für Autoplay zusätzlich muted und playsinline.
- Schritt 4:Untertitel und Daten ergänzenHänge eine Untertitel-Spur an und füge VideoObject hinzu.
- Schritt 5:Auf dem Handy testenPrüfe Start, Ton, Vollbild und Ladezeit auf einem echten Gerät.
So sieht das bei uns aus
Aus unserer Arbeit
Die Filme der Stil-Bibliothek von sechzigsekunden liegen auf der Website mit Vorschaubild. Das Bild zeigt den Stil Kachelwand aus dieser Bibliothek.
Wie du den Film nutzt, besprechen wir im Storyboard-Call. Den Weg dorthin zeigt der Ablauf.
Fragen und Antworten
Wie lade ich ein Video, ohne die Seite langsam zu machen?
Setze ein Vorschaubild und preload auf metadata oder none. Der Browser lädt die Datei dann erst, wenn jemand abspielt.
Warum startet mein Video nicht von allein?
Browser blockieren Autoplay mit Ton. Mit muted und playsinline startet es meist. Die aktuellen Regeln beschreibt das Chrome-Team.
Brauche ich für YouTube-Einbettung eine Einwilligung?
Meist ja, wenn dabei Daten an die Plattform gehen. Eine Zwei-Klick-Lösung ist verbreitet. Das ist keine Rechtsberatung.
MP4 oder WebM?
MP4 läuft fast überall. WebM kannst du als zweite Quelle ergänzen.
