Hinzufügen einer Bildüberlagerung zu einem Video

In diesem Thema erfahren Sie, wie Sie ein Bild-Overlay zu einem Video hinzufügen können.

Brightcove Interactivity Studio bietet die Möglichkeit, verschiedene Arten von interaktiven Overlays zu Videos hinzuzufügen. Während der Videowiedergabe können Text- und Bildüberlagerungen auf Videos angezeigt werden. Mit Overlays kann beispielsweise zusätzlicher Text oder ein Firmenlogo in einem Video angezeigt werden. Overlays können auch anklickbar sein und bei Bedarf weitere Webseiten öffnen.

Bevor du anfängst

Bevor Sie einem Player Interaktivität hinzufügen können, benötigen Sie einen HapYak-aktivierten Brightcove-Player, und Sie müssen sicherstellen, dass ein Brightcove-Interaktivitätsprojekt erstellt wurde. Informationen dazu finden Sie unter Erste Schritte mit der Interaktivität.

Hinzufügen eines Bild-Overlays

Bildüberlagerungen werden verwendet, um während der Wiedergabe ein Bild in einem Video anzuzeigen. Das Overlay kann auch anklickbar sein und beim Anklicken eine andere Browserseite öffnen. Im folgenden Beispiel erscheint das Bild-Overlay bei 75 % des Videos und wird bis zum Ende des Videos angezeigt. Wenn Sie auf das Overlay klicken, wird ein Link in einer neuen Browser-Registerkarte geöffnet und das Video angehalten.


Gehen Sie folgendermaßen vor, um einem Projekt ein Bild-Overlay hinzuzufügen:

  1. Melden Sie sich bei Brightcove Interactivity Studio(https://www.hapyak.com/login) an.
  2. Klicken Sie in der linken Navigation auf Verwalten.
  3. Klicken Sie auf ein Projekt, um es zu öffnen.
  4. Klicken Sie in der unteren Symbolleiste auf die Schaltfläche Bildüberlagerung.
  5. Klicken Sie auf Datei auswählen und wählen Sie ein Bild aus oder klicken Sie auf die Registerkarte URL und geben Sie die URL zu einer Bilddatei ein.
  6. Klicken Sie auf Anzeigen.
  7. Das Bild wird in der Registerkarte Vorschau angezeigt. Klicken Sie auf SUBMIT.
  8. Klicken Sie auf die Überlagerung und ziehen Sie sie an die Stelle, an der sie im Video erscheinen soll.
  9. Klicken Sie auf das Menü Startzeit .
  10. Geben Sie eine Startzeit in Sekunden, als Prozentsatz oder im Zeitformat ein. In diesem Beispiel wird die Startzeit auf den 75%-Punkt des Videos gesetzt. Klicken Sie auf SUBMIT.
  11. Klicken Sie auf das Uhrensymbol, um die Dauer des Overlays einzustellen. Klicken Sie auf SUBMIT.
  12. Klicken Sie auf das Menü Link .
  13. Geben Sie eine URL ein, zu der weitergeleitet werden soll, wenn das Overlay angeklickt wird.
  14. (Optional) Klicken Sie auf die Registerkarte VERHALTEN und legen Sie fest, dass das Video bei einem Videoklick pausiert. Klicken Sie auf SUBMIT.
  15. Klicken Getan.

Veröffentlichen Sie das Video mit dem Medienmodul und überprüfen Sie, ob das Overlay erscheint.

Tipps

Größe der Datei

Die Bildkommentare werden dynamisch geladen, wenn der Betrachter einen bestimmten Punkt im Video erreicht. Daher ist es eine gute Idee (wie bei allen Bildern im Internet), ein ausgewogenes Verhältnis zwischen hoher Qualität und geringer Dateigröße zu gewährleisten. Eine gute Faustregel für Bildkommentare ist es, sie unter 200 KB zu halten. Wie bei jeder webbasierten Technologie gilt: Je mehr Bilder Sie laden, desto länger dauert es, bis die Seite geladen ist.

PNG oder JPG?

Die meisten Bildkommentare, die wir sehen, sind PNG-Dateien, da diese eine Transparenzebene enthalten, die dafür sorgt, dass das Bild nahtlos mit dem Video verschmilzt. Wir empfehlen insbesondere, die Größe von PNG-Dateien mit einem Dienst wie TinyPNG zu minimieren. 

JPGs funktionieren natürlich genauso gut. Sie verfügen jedoch nicht über eine Transparenzebene, daher ist bei ihrer Verwendung Vorsicht geboten.

Datei oder URL hochladen?

Wir empfehlen, Ihrem normalen Arbeitsablauf zu folgen. Wenn Sie normalerweise Bilder für Ihre Website oder andere Inhalte in ein System eines Drittanbieters wie Amazon S3 oder Wordpress hochladen, sollten Sie dies auch weiterhin tun. Wenn Sie normalerweise direkt von Ihrem System hochladen, verwenden Sie einfach die Option "Datei hochladen".