Konfigurieren eines Brightcove-Players mit dem HapYak-Plugin

In diesem Thema erfahren Sie, wie Sie einen Brightcove-Player mit dem HapYak-Plugin konfigurieren.

Das HapYak-Plugin für den Brightcove-Player ermöglicht es dem Player, die von Brightcove Interactivity bereitgestellten Funktionen zu nutzen. Die Verwendung des Plugins hat folgende Vorteile:

Automatische Erstellung von Brightcove-Interaktivitätsprojekten für jedes im konfigurierten Player angezeigte Video
Programmatischer Zugriff auf Video-Metadaten über die HapYak Extension APIs
Dynamisches Laden von Brightcove Interactivity-Vorlagen
Automatische Synchronisierung von Projekttiteln mit Videotiteln

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.

Konfigurieren eines Players mit dem HapYak-Plugin

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. Wenn Sie Fragen zur Plugin-Kompatibilität haben, wenden Sie sich bitte an den Brightcove-Support.

Gehen Sie folgendermaßen vor, um das HapYak-Plugin zu einem Brightcove-Player hinzuzufügen.

Melden Sie sich bei Video Cloud Studio an.
Öffne das Spieler Modul.
Klicken Sie auf + Spieler hinzufügen.
Nennen Sie den Player HapYak Player und klicken Sie dann auf Speichern.
Hinweis: Sie können das HapYak-Plugin auch zu einem bestehenden Player hinzufügen. Wenn Sie das HapYak-Plugin zu einem Player mit anderen Plugins hinzufügen, wenden Sie sich bitte an den Brightcove-Support , um die Kompatibilität zu überprüfen.
Klicken Sie auf den Link HapYak Player , um die Eigenschaften des Players zu öffnen.
Klicken Plugins im linken Navigationsmenü.
Klicken Sie auf Plugin hinzufügen ˇ > Benutzerdefiniertes Plugin.
Für den Plugin-Namen verwenden Sie hapyak. Beim Namen wird zwischen Groß- und Kleinschreibung unterschieden.

Verwenden Sie für die JavaScript-URL:

 https://d2qrdklrsxowl2.cloudfront.net/js/partners/brightcoveV2/hapyak-plugin.js

Wenn der Player auch das IMA3-Plugin verwendet, sollte Folgendes zur CSS-URL hinzugefügt werden:
```
//hapyak-partners.s3.amazonaws.com/brightcove/ima3.css
```
Dadurch wird sichergestellt, dass die IMA3-Plugin-Schicht keine HapYak-Interaktionen überdeckt.
Für das Plugin Options(JSON) benötigen Sie den Wert Ihres HapYak API Read Key. Um Ihren API-Leseschlüssel zu erhalten, melden Sie sich bei Ihrem Brightcove Interactivity-Konto an, und klicken Sie in der Hauptnavigation auf Integrationen (oder klicken Sie hier). Wenn Sie den Schlüssel haben, geben Sie für die Optionen (JSON) ein:
```
{
"apiKey": "Ihr HapYak API-Leseschlüssel"
}
```
Hinweis: Wenn Sie Untergruppen verwenden, denken Sie daran, dass jede Untergruppe einen eigenen API-Leseschlüssel hat.
Einige Mobilgeräte entfernen interaktive Elemente, wenn Videos in geräteeigenen Playern wie dem QuickTime-Player auf iOS-Geräten geöffnet werden. Brightcove hat eine Lösung entwickelt, die das Standardverhalten von Videos auf iOS- und Android-Geräten außer Kraft setzt. Durch "mocking full screen" können Videos im Vollbildmodus abgespielt werden und die interaktiven Funktionen von HapYak bleiben erhalten. Die folgenden Parameter können zu den Optionen (JSON) hinzugefügt werden, um die Darstellung auf mobilen Geräten zu verbessern:
- "loadFullScreenMobile" : true - Setzt das Standard-Vollbildverhalten auf iOS-Geräten außer Kraft
- "Position": "Mitte" - Stellt sicher, dass das Video im Hochformat in der Mitte des Gerätebildschirms angezeigt wird (entspricht dem Standardverhalten aller mobilen Geräte)

Wenn Sie einen schreibgeschützten" Player konfigurieren möchten, der Interaktivität in vorhandenen Brightcove Interactivity-Projekten anzeigt, aber KEINE neuen Projekte veröffentlicht, fügen Sie den folgenden Parameter zu den Optionen (JSON) unterhalb des apiKey-Werts hinzu:
```
"readOnly": wahr
```
Klicken Sie auf Speichern.
Um den Player zu veröffentlichen, klicken Sie auf & Embed. .. und dann auf Änderungen veröffentlichen.

Der HapYak Player ist nun einsatzbereit.

Erweiterte Anmerkungen

Eine benutzerdefinierte JavaScript-Methode kann bereitgestellt werden, um Tracking-Ereignisse zu erfassen, sobald sie auftreten. Fügen Sie dazu einfach den Speicherort Ihrer JavaScript-Datei in den Plugin-Optionen hinzu.
```
{
  "apiKey": ...,
  "customTracking": "https://dmhl2y7t4r72w.cloudfront.net/brightcove/bcovTrackingHandler.js"
}
```

HapYak lädt standardmäßig seine eigene Kopie von JQuery. Wenn Sie den Brightcove-Player mit aktiviertem HapYak-Plugin einbetten, setzt HapYak beim Laden eine bereits auf der Seite vorhandene Kopie von JQuery außer Kraft. Um dieses Verhalten zu verhindern und eine bestehende Kopie von JQuery zu erhalten, müssen Sie die Option "preserveJQuery" in den Plugin-Optionen beim Einrichten des Plugins übergeben. Zum Beispiel, die Angabe


{
  "apiKey": ...,
  "preserveJQuery": wahr
}

verhindert, dass HapYak sein eigenes JQuery lädt, solange es bereits eines auf der Seite gibt.

Zusammenfassung des HapYak jQuery Ladeverhaltens
	preserveJQuery: true	preserveJQuery: false
jQuery auf der Seite vorhanden	JQuery nicht laden	JQuery laden
jQuery auf der Seite nicht vorhanden	JQuery laden	JQuery laden

HapYak gibt ein benutzerdefiniertes Ereignis auf der Brightcove-Player-Instanz aus, das meldet, wenn die HapYak-Viewer-Instanz bereit ist. Dieses Ereignis heißt hyViewerLoaded und kann mit folgendem Code abgehört werden:
```
bcPlayerInstance.on('hyViewerLoaded', function () {
   console.log(player.hapyakViewer);
});
```
Wie oben gesehen, können Sie auf die HapYak-Viewer-Instanz aus der Player-Instanz als Eigenschaft namens hapyakViewer zugreifen.