Erste Schritte mit Interaktivität

In diesem Thema erfahren Sie, wie Sie mit Brightcove Interactivity beginnen können.

Das HapYak-Plugin für den Brightcove-Player ermöglicht es dem Player, die von Brightcove Interactivity bereitgestellten Funktionen zu nutzen. Wenn Interaktionen zu einem Brightcove-Interaktivitätsprojekt hinzugefügt werden, werden sie automatisch im entsprechenden Video angezeigt. Dadurch entfällt das Kopieren und Veröffentlichen des Einbettungscodes in Brightcove Interactivity Studio.

Bevor du anfängst

Bevor Sie mit der Interaktivität beginnen können, müssen Sie einen Brightcove-Player mit dem HapYak-Plugin konfigurieren. Durch Hinzufügen des HapYak-Plugins zu einem Brightcove-Player kann während der Videowiedergabe Interaktivität innerhalb des Players angezeigt werden. Das HapYak-Plugin kann mit anderen Player-Plugins koexistieren. Die vollständigen Schritte zum Erstellen eines HapYak-aktivierten Players finden Sie unter Konfigurieren eines Brightcove-Players mit dem HapYak-Plugin.

Erstellen eines Brightcove-Interaktivitätsprojekts

Wenn ein Video in einem HapYak-aktivierten Brightcove-Player wiedergegeben wird, geschehen folgende Dinge:

  • Die Brightcove-Video-ID, der Titel, die Tags und die benutzerdefinierten Felder werden an Brightcove Interactivity übergeben
  • Brightcove Interactivity versucht, die Video-ID innerhalb Ihrer Gruppe zu suchen
  • Wenn kein passender Datensatz gefunden wird, erstellt Brightcove Interactivity ein Projekt mit den gesendeten Daten
  • Brightcove Interactivity legt außerdem die Projekteigenschaften so fest, dass sie als "automatisch erstellt" gekennzeichnet sind:
    • Der Wert is_published wird auf TRUE gesetzt
    • Es wird ein Tag mit dem Wert live hinzugefügt

Mit den folgenden Schritten wird automatisch ein Brightcove Interactivity-Projekt erstellt:

  1. Melden Sie sich bei Video Cloud Studio an.
  2. Öffne das Medien Modul.
  3. Wählen Sie ein Video aus, das veröffentlicht werden soll, indem Sie das Kontrollkästchen neben der Miniaturansicht des Videos aktivieren.
  4. Klicken Veröffentlichen und einbetten... ˇ > Im Web veröffentlichen.
  5. Wählen Sie den Player mit dem HapYak-Plugin aus.
  6. Klicken Sie auf den Vorschau-Link, um eine Vorschau in einer neuen Browser-Registerkarte zu öffnen.
  7. Spielen Sie das Vorschauvideo ab (das Video muss nur einige Sekunden lang abgespielt werden). Dadurch wird automatisch ein Projekt in Brightcove Interactivity erstellt.
  8. Melden Sie sich bei Brightcove Interactivity Studio(https://www.hapyak.com/login) an.
  9. Klicken Sie in der linken Navigation auf Verwalten.
  10. Eine Liste der Projekte wird angezeigt. Bestätigen Sie, dass das soeben veröffentlichte Video in der Projektliste erscheint.

Hinzufügen eines Text-Overlays

In diesem Thema wird ein einfaches Text-Overlay hinzugefügt, um zu überprüfen, ob die Interaktivität in einem Brightcove-Player angezeigt werden kann.

  1. Klicken Sie in der Brightcove-Interaktivitäts-Benutzeroberfläche auf das Projekt, um es zu öffnen.
  2. Klicken Sie in der unteren Symbolleiste auf die Schaltfläche Textüberlagerung.
  3. Klicken Sie im Menü auf den Link Editor .
  4. Geben Sie einen Beispieltext für das Overlay ein und klicken Sie auf SUBMIT.
  5. Klicken Getan.

Ausführliche Informationen zum Hinzufügen von Text- und Bildüberlagerungen zu Videos finden Sie unter:

Vorschau und Erzeugung des Einbettungscodes für ein Video

Nachdem eine Interaktion zu einem Brightcove-Interaktivitätsprojekt hinzugefügt wurde, können Sie eine Vorschau des Videos anzeigen, um sicherzustellen, dass die Interaktivität wie erwartet funktioniert. Wenn ein Video in einen HapYak-aktivierten Brightcove-Player geladen wird, geschieht Folgendes:

  1. Die Brightcove-Video-ID, der Titel, die Tags und die benutzerdefinierten Felder werden an Brightcove Interactivity gesendet.
  2. Brightcove Interactivity versucht, die Video-ID innerhalb Ihrer Brightcove Interactivity-Gruppe zu suchen.
  3. Wenn ein übereinstimmender Datensatz gefunden wird, filtert Brightcove Interactivity nach dem Datensatz, bei dem der is_published-Wert auf TRUE gesetzt ist. Das Projekt mit der passenden Video-ID und der Ist veröffentlicht Wert eingestellt WAHR wird Angezeigt werden.
  4. Wenn mehr als ein passender Datensatz gefunden wird, filtert Brightcove Interactivity nach dem zuletzt geänderten Datensatz, dessen is_published-Wert auf TRUE gesetzt ist. Das zuletzt geänderte Projekt mit der passenden Video-ID und der Angabe is_published

Folgen Sie diesen Schritten, um eine Vorschau anzuzeigen und den Einbettungscode für das Video zu generieren:

  1. Öffne das Medien Modul.
  2. Wählen Sie das Video aus, das Sie zum Erstellen des Brightcove-Interaktivitätsprojekts verwendet haben, und veröffentlichen Sie es.
  3. Wählen Sie in der Dropdown-Liste Player auswählen den HapYak-aktivierten Player aus.
  4. Drücke den URL unterhalb des Vorschau-Players, um ihn in einem neuen Browser-Tab zu öffnen. Bestätigen Sie, dass die Interaktion angezeigt wird.
  5. Kopieren Sie den Einbettungscode und fügen Sie ihn in Ihre Webseite ein.

Außerdem MÜSSEN Sie im Einbettungscode innerhalb des Tags <video-js> playsinline hinzufügen. Bitte beachten Sie die nachstehenden Beispiele:

Standard


<div>
style="position: relative; display: block; max-width: 960px;">
< div
style="padding-top: 56.25%;">
< iframe
src="//players.brightcove.net/1486906377/dunFq3vI6_default/index.html"
playsinline
allowfullscreen=""
allow="encrypted-media"
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></iframe>
< /div>
< /div>

Fortgeschrittene


<div style="max-width: 960px;">
< video-js playsinline
data-account="1486906377"
data-player="dunFq3vI6"
data-embed="default"
controls="
data-application-id=""
class="vjs-fluid"
style="padding-top: 56.25%;">
< /video-js>
< /div>
< script
src="//players.brightcove.net/1486906377/dunFq3vI6_default/index.min.js">
< /script>

Hinweise

  1. Anmerkungen, die einem Projekt auf Projektebene (d. h. nicht über Vorlagen) hinzugefügt werden, sollten in etwa 90 Sekunden erscheinen. Es kann bis zu zwei Stunden dauern, bis die über Vorlagen hinzugefügten Anmerkungen erscheinen.
  2. Erstellen Sie keine Brightcove-Projekte manuell in Brightcove Interactivity Studio. Das Plugin wird dies automatisch tun.
  3. Beim Hochladen einer neuen Videoquelldatei in Video Cloud bleiben die Video-ID und die Verbindung zu Brightcove Interactivity erhalten.
  4. Verwenden Sie bei der Verwendung des Plug-ins nicht den von den Brightcove-Interaktivitätstools generierten EMBED-Code. Veröffentlichen Sie Ihre Videos stattdessen über den normalen Brightcove-Workflow.
  5. Workflow-generierte Projekte können mit Brightcove Interactivity Studio gelöscht werden. Beachten Sie, dass beim anschließenden Laden des entsprechenden Videos über den Brightcove-Player automatisch ein separates Projekt auf der Grundlage derselben Videoquelle im Portal generiert wird.