Lancement de l'interactivité

Dans cette rubrique, vous apprendrez à démarrer avec Brightcove Interactivity.

Le plugin HapYak pour le lecteur Brightcove permet au lecteur de profiter des fonctionnalités offertes par Brightcove Interactivity. 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.

Préliminaires

Avant de commencer à utiliser l'interactivité, vous devez disposer d'un lecteur Brightcove configuré 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. Pour obtenir des informations complètes sur la création d'un lecteur compatible avec HapYak, consultez la rubrique Configuration d'un lecteur Brightcove avec le plugin HapYak.

Création d'un projet d'interactivité Brightcove

Lorsqu'une vidéo est lue dans un lecteur Brightcove compatible Hapyak, les événements suivants se produisent :

L'ID, le titre, les balises et les champs personnalisés de la vidéo Brightcove sont transmis à Brightcove Interactivity
Brightcove Interactivity tente de rechercher l'ID de la vidéo au sein de votre groupe
Si aucun enregistrement correspondant n'est trouvé, Brightcove Interactivity crée un projet avec les données envoyées
Brightcove Interactivity définira également les propriétés du projet pour indiquer qu'il a été « créé automatiquement » :
- La valeur is_published sera fixée à TRUE
- Une étiquette avec la valeur " live" sera ajoutée

Les étapes suivantes créeront automatiquement un projet Brightcove Interactivity :

Connectez-vous à Video Cloud Studio.
Ouvrez le module Médias.
Sélectionnez une vidéo à publier en cochant la case en regard de la miniature de la vidéo.
Cliquez sur Publier et intégrer... > Publier sur le Web.
Sélectionnez le lecteur avec le plugin HapYak.
Cliquez sur le lien de prévisualisation pour ouvrir un aperçu dans un nouvel onglet du navigateur.
Lisez la vidéo de prévisualisation (la vidéo ne doit être lue que pendant quelques secondes). Cela créera automatiquement un projet dans Brightcove Interactivity.
Remarque : Vous devez prévisualiser la vidéo en utilisant le lien de prévisualisation. La prévisualisation de la vidéo à l'aide du lecteur de prévisualisation du module Média ne créera pas automatiquement de projet.
Connectez-vous à Brightcove Interactivity Studio(https://www.hapyak.com/login).
Remarque : Pour les nouveaux comptes, les identifiants de connexion peuvent être fournis par le service d'intégration ou le support technique de Brightcove. Pour les comptes existants, toute personne disposant d'un accès de niveau administrateur à Brightcove Interactivity Studio peut se connecter et inviter des utilisateurs supplémentaires à partir du panneau d'administration.
Dans la navigation de gauche, cliquez sur Gérer.
Une liste de projets s'affiche. Confirmez que la vidéo que vous venez de publier apparaît dans la liste des projets.

Remarque : La colonne Tags comprend tous les tags associés à la vidéo. Une balise supplémentaire de live est ajoutée à chaque projet créé automatiquement par le plugin.

Ajout d'un texte superposé

Dans cette rubrique, une simple superposition de texte sera ajoutée pour valider que l'interactivité peut être affichée dans un lecteur Brightcove.

Dans l'interface utilisateur de Brightcove Interactivity, cliquez sur le projet pour l'ouvrir.
Dans la barre d'outils inférieure, cliquez sur le bouton de superposition de texte.
Cliquez sur le lien Éditeur dans le menu.
Saisissez un exemple de texte pour la superposition et cliquez sur SOUMETTRE.
Cliquez sur Done.

Pour plus d'informations sur l'ajout de superpositions de texte et d'images aux vidéos, voir la rubrique

Prévisualisation et génération du code d'intégration d'une vidéo

Une fois qu'une interaction a été ajoutée à un projet d'interactivité Brightcove, prévisualisez la vidéo pour vous assurer que l'interactivité fonctionne comme prévu. Lorsqu'une vidéo est chargée dans un lecteur Brightcove compatible Hapyak, les événements suivants se produisent :

L'ID, le titre, les balises et les champs personnalisés de la vidéo Brightcove sont envoyés à Brightcove Interactivity.
Brightcove Interactivity tente de rechercher l'ID de la vidéo dans votre groupe Brightcove Interactivity.
Si un enregistrement correspondant est trouvé, Brightcove Interactivity filtre sur l'enregistrement dont la valeur is_published est définie sur TRUE. Le projet dont l'ID vidéo correspond et dont la valeur is_published est fixée à TRUE s'affiche.
Si plusieurs enregistrements correspondants sont trouvés, Brightcove Interactivity filtre sur l'enregistrement le plus récemment modifié dont la valeur is_published est définie sur TRUE. Le dernier projet modifié avec l'identifiant vidéo correspondant et la mention " is_published"

Remarque : La valeur is_published peut être modifiée manuellement à l'aide de la boîte de dialogue Settings (cliquez sur SETTINGS en haut de la page).

Pour prévisualiser et générer le code d'intégration de la vidéo, procédez comme suit :

Ouvrez le module Médias.
Sélectionnez la vidéo utilisée pour créer le projet d'interactivité Brightcove et publiez-la.
Dans le Sélectionner un joueur liste déroulante, sélectionnez le lecteur compatible HapYak.
Cliquez sur l' URL située sous le lecteur de prévisualisation pour l'ouvrir dans un nouvel onglet de navigateur. Confirmez que l'interaction apparaît.

Remarque : Par défaut, le texte superposé est configuré pour s'afficher pendant 3 secondes.
Copiez le code d'intégration et collez-le dans votre page web.

De plus, dans le code d'intégration, vous DEVOIR ajouter joue en ligne à l'intérieur de <vidéo-js> étiqueter. Veuillez vous référer aux exemples ci-dessous :

Standard


<div>
  style="position : relative ; affichage : bloc ; largeur maximale : 960 px ; ">
  <div
    style="padding-top : 56,25 % ; « >
    <iframe
      src= » //players.brightcove.net/1486906377/dunfq3vi6_default/index.html »  
      playsinline
      allowfullscreen= "»
      allow="encrypted-media »
      style="position : absolue ; haut : 0 px ; droite : 0 px ; bas : 0 px ; gauche : 0 px ; largeur : 100 % ; hauteur : 100 % ; «</iframe & gt ;
  </div >
</div >

Avancé


<div style="max-width : 960 px ; ">
  <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 >

Remarques

Les annotations ajoutées à un projet au niveau du projet (c'est-à-dire pas par le biais de modèles) devraient apparaître en 90 secondes environ. Les annotations ajoutées par le biais de modèles peuvent prendre jusqu'à deux heures pour apparaître.
Ne créez pas manuellement des projets Brightcove dans Brightcove Interactivity Studio. Le plugin le fera automatiquement.
Le chargement d'un nouveau fichier source vidéo dans le nuage de vidéos préservera l'ID vidéo et la connexion à Brightcove Interactivity.
N'utilisez pas le code EMBED généré par les outils d'interactivité de Brightcove lorsque vous utilisez le plugin. Au lieu de cela, publiez vos vidéos en suivant la procédure normale de Brightcove.
Les projets générés par le flux de travail peuvent être supprimés à l'aide de Brightcove Interactivity Studio. Veuillez noter que les chargements ultérieurs de la vidéo correspondante dans le lecteur Brightcove généreront automatiquement un projet distinct basé sur la même source vidéo dans le portail.