Ajout d'une transcription interactive 3Play Media à une vidéo

Dans cette rubrique, vous apprendrez à utiliser le plug-in 3Play pour ajouter une transcription interactive à un Brightcove Player.

Une transcription interactive peut être affichée à côté d'un lecteur pour afficher le texte parlé dans une vidéo. Lorsque l'utilisateur entend les mots prononcés, les mots correspondants dans la transcription sont soulignés ou mis en surbrillance. Des transcriptions interactives peuvent être utilisées pour contrôler l'expérience de visionnage. Par exemple, les spectateurs peuvent rechercher la transcription de la vidéo et naviguer jusqu'à un point exact en cliquant sur n'importe quel mot.

Si vous publiez des vidéos à l'aide d'une expérience Galerie sur la page, un composant 3Play peut être ajouté à l'expérience pour afficher les transcriptions vidéo. Pour plus d'informations, consultez Ajout de composants à une expérience sur la page.

Vous trouverez ci-dessous un exemple de vidéo avec la transcription associée.

3Play Media propose deux méthodes d'intégration pour publier des plugins :

  • iFrame (conseillé)
  • JavaScript

Utilisation de l'intégration iFrame

La méthode d'intégration iFrame fournit le code d'intégration iFrame nécessaire pour intégrer un lecteur vidéo avec la transcription associée ci-dessous. C'est un moyen simple d'ajouter une transcription à un lecteur sans avoir besoin de codage.

Pour générer l'intégration iFrame pour un lecteur et une transcription, procédez comme suit.

  1. Connectez-vous à votre compte 3Play.
  2. Recherchez la vidéo pour laquelle vous souhaitez afficher une transcription, puis cliquez sur le titre.
  3. Cliquez sur Publier > Publier le plug-in.
  4. Élargir la Paramètres vidéo section.
  5. Entrer le ID de joueur du Brightcove Player sur lequel vous souhaitez publier la vidéo. L' ID vidéo et le numéro de compte doivent être renseignés avec l'ID vidéo et le numéro de compte Brightcove sélectionnés.
  6. Dans le Fonctionnalités du plugin rubrique, sélectionnez Transcription interactive puis sélectionnez les options appropriées.
  7. Élargir le Paramètres de style section et définissez un Largeur et la taille pour le plugin. Notez que la largeur et la hauteur incluront à la fois l'intégration vidéo et la transcription.
  8. Copiez le code d'intégration et collez-le dans votre page HTML.

Il existe une option pour Enregistrer un nouveau modèle. 3Play Media offre la possibilité d'enregistrer un modèle de plugin. Ensuite, pour la vidéo suivante, vous pouvez sélectionner un modèle au lieu d'avoir à configurer le plugin à chaque fois. De plus, les modifications apportées à un modèle seront reflétées dans tous les plugins publiés, ce qui facilite la mise à jour de l'apparence de plusieurs plugins. Pour plus d'informations sur l'utilisation des modèles de plugins, consultez le document 3Play Créer et gérer des modèles de plugins.

Utilisation de l'intégration JavaScript

L'option d'intégration JavaScript offre plus de personnalisation que la méthode d'intégration iFrame. Cette méthode nécessite une compréhension de base de JavaScript et CSS. Le code d'intégration JavaScript n'incluant pas le Brightcove Player, le code d'intégration du lecteur de Video Cloud doit être ajouté à la page en tant qu'étape distincte. Le code d'intégration du lecteur avancé doit être utilisé lors de la publication de la vidéo.

Pour générer l'intégration JavaScript pour une transcription, procédez comme suit.

  1. Connectez-vous à votre compte 3Play.
  2. Recherchez la vidéo pour laquelle vous souhaitez afficher une transcription, puis cliquez sur le titre.
  3. Cliquez sur Publier > Publier le plug-in.
  4. Élargir la Paramètres vidéo section.
  5. Pour la méthode Embed, sélectionnez Personnalisé (Javascript).
  6. Confirmer le Type de lecteur vidéo est Brightcove. Les Cible vidéo valeur devra être ajoutée au code d'intégration du lecteur (fait dans une étape ultérieure).
  7. Dans le Fonctionnalités du plugin rubrique, sélectionnez Transcription interactive puis sélectionnez les options appropriées.
  8. Copiez le code d'intégration et collez-le dans votre page HTML.
  9. Dans le Paramètres de style section, copiez le identifiant texte dans le presse-papiers. Cette valeur sera ajoutée au code d'intégration du lecteur.
  10. Modifiez le code d'intégration du lecteur sur votre page HTML (à partir du module Média) en ajoutant le id paramètre au <video> marque. Un exemple de code d'intégration est présenté ci-dessous.

CSS peut ensuite être utilisé pour styliser la transcription. Par exemple, le CSS ci-dessous définira la largeur de la zone de transcription, changera la couleur du mot actuel et changera la couleur du texte et de la police qui sont utilisés dans la transcription.

    <style type = "text / css">
    .p3sdk-interactive-transcript {
      width: 640px;
      }
      .p3sdk-mot-courant {
      fond: rouge! important;
      }
      .p3sdk-interactive-transcript-content p {
      couleur: orange! important;
      style de police: italique! important;
      taille de police: 20px! Important;
      }
      </style>

Voici l'exemple de transcription.

 

Pour plus d'informations sur l'utilisation de CSS pour styliser le plugin, consultez Personnaliser les plugins à l'aide de CSS.

Vous trouverez ci-dessous quelques ressources utiles qui couvrent l'utilisation de la méthode d'intégration JavaScript.