Configuration d'un lecteur Brightcove avec le plugin HapYak

Dans cette rubrique, vous apprendrez à configurer un lecteur Brightcove avec le plugin HapYak.

Le plugin HapYak pour le lecteur Brightcove permet au lecteur de profiter des fonctionnalités offertes par Brightcove Interactivity. L'utilisation du plugin présente les avantages suivants :

Création automatique d'un projet d'interactivité Brightcove pour chaque vidéo visionnée dans le lecteur configuré
Accès programmatique aux métadonnées vidéo à partir des API d'extension HapYak
Chargement dynamique des modèles d'interactivité Brightcove
Synchronisation automatique des titres des projets avec les titres des vidéos

Lorsque des interactions sont ajoutées à un projet d'interactivité Brightcove, elles s'affichent automatiquement sur la vidéo correspondante. Il n'est donc plus nécessaire de copier et de publier le code d'intégration dans Brightcove Interactivity Studio.

Configuration d'un lecteur avec le plugin HapYak

L'ajout du plugin HapYak à un lecteur Brightcove permet d'afficher l'interactivité à l'intérieur du lecteur pendant la lecture de la vidéo. Le plugin HapYak peut coexister avec d'autres plugins de lecteur. Si vous avez des questions sur la compatibilité des plugins, veuillez contacter le support Brightcove.

Pour ajouter le plugin HapYak à un lecteur Brightcove, procédez comme suit.

Connectez-vous à Video Cloud Studio.
Ouvrez le module Players.
Cliquez sur + Ajouter un lecteur.
Nommez le lecteur HapYak Player et cliquez sur Enregistrer.
Remarque : Vous pouvez également ajouter le plugin HapYak à un lecteur existant. Si vous ajoutez le plugin HapYak à un lecteur contenant d'autres plugins, veuillez contacter le support Brightcove pour vérifier la compatibilité.
Cliquez sur le lien HapYak Player pour ouvrir les propriétés du lecteur.
Cliquez sur Extensions dans le menu de navigation de gauche.
Cliquez sur Add a Plugin ˇ > Custom Plugin.
Pour le nom du plugin, utilisez hapyak. Le nom est sensible à la casse.

Pour l'URL JavaScript, utilisez :

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

Si le lecteur utilise également le plugin IMA3, les informations suivantes doivent être ajoutées à l'URL CSS:
```
//hapyak-partners.s3.amazonaws.com/brightcove/ima3.css
```
Cela permettra de s'assurer que la couche de plugin IMA3 ne couvre pas les interactions HapYak.
Pour le plugin Options(JSON), vous aurez besoin de la valeur de votre clé de lecture de l'API HapYak. Pour obtenir votre clé de lecture API, connectez-vous à votre compte Brightcove Interactivity et cliquez sur Intégrations dans la navigation principale (ou cliquez ici). Lorsque vous avez la clé, pour les Options (JSON), entrez :
```
{
« ApiKey » : « votre clé de lecture de l'API HapYak »
}
```
Remarque : Si vous utilisez des sous-groupes, n'oubliez pas que chaque sous-groupe aura une clé de lecture API unique.
Certains appareils mobiles suppriment les éléments interactifs lorsque les vidéos sont ouvertes dans des lecteurs propres à l'appareil, comme le lecteur QuickTime sur les appareils iOS. Brightcove a créé une solution qui remplace le comportement par défaut des vidéos sur les appareils iOS et Android. En simulant le plein écran, les vidéos peuvent être lues en plein écran tout en conservant les fonctions interactives de HapYak. Les paramètres suivants peuvent être ajoutés aux Options (JSON) pour améliorer l'expérience sur les appareils mobiles :
- « LoadFullScreenMobile » : true- Remplace le comportement en plein écran par défaut sur les appareils iOS
- « position » : « milieu »: garantit que la vidéo s'affiche au milieu de l'écran de l'appareil en mode portrait (imite le comportement par défaut de tous les appareils mobiles)

Si vous souhaitez configurer un lecteur "en lecture seule" qui affichera l'interactivité sur les projets Brightcove Interactivity existants mais PAS publier de nouveaux projets, ajoutez le paramètre suivant au Option(JSON) , sous le clé API valeur:
```
« ReadOnly » : vrai
```
Cliquez sur Save.
Pour publier le lecteur, cliquez sur Publier et intégrer... puis Publier les modifications.

Le lecteur HapYak est maintenant prêt à être utilisé.

Notes avancées

Une méthode JavaScript personnalisée peut être fournie pour capturer les événements de suivi au fur et à mesure qu'ils se produisent. Pour ce faire, il suffit d'ajouter l'emplacement de votre fichier JavaScript dans les options du plugin.
```
{
  « Clé API » :...,
  « Suivi personnalisé » : « https://dmhl2y7t4r72w.cloudfront.net/brightcove/bcovTrackingHandler.js »
}
```

HapYak charge par défaut sa propre copie de JQuery. Si vous intégrez le lecteur Brightcove avec le plugin HapYak activé, HapYak remplacera une copie existante de JQuery déjà présente sur la page lors de son chargement. Pour éviter ce comportement et préserver une copie existante de JQuery, vous devez passer l'option "preserveJQuery" dans les options du plugin lors de la configuration du plugin. Par exemple, en spécifiant


{
  « Clé API » :...,
  « PreserveJQuery » : vrai
}

empêchera HapYak de charger son propre JQuery s'il y en a déjà un sur la page.

Résumé du comportement de chargement de HapYak jQuery
	PreserveJQuery : vrai	PreserveJQuery : faux
jQuery présent sur la page	Ne pas charger jQuery	Charger jQuery
jQuery absent de la page	Charger jQuery	Charger jQuery

HapYak émet un événement personnalisé sur l'instance de lecteur Brightcove qui signale que l'instance de visionneuse HapYak est prête. Cet événement est HyViewerLoaded qui peut être écouté à l'aide du code suivant :
```
bcPlayerInstance.on('hyViewerLoaded', function () {
   console.log (Player.HapyakViewer) ;
}) ;
```
Comme nous l'avons vu plus haut, vous pouvez accéder à l'instance de la visionneuse HapYak à partir de l'instance du lecteur sous la forme d'une propriété appelée hapyakViewer.