Ajout de légendes aux vidéos par programme

Aperçu

Il est possible d'ajouter des sous-titrages à vos vidéos offrant des informations supplémentaires ou explicatives aux personnes qui souhaitent y accéder. Les sous-titres permettent aux sourds et aux malentendants de profiter de la partie audio des vidéos. Pour afficher les sous-titres d'une vidéo dans Brightcove Player, vous devez effectuer les tâches suivantes:

• Créez un fichier de sous-titres pour votre vidéo
• Modifiez le code de publication du lecteur pour inclure une balise <track>
• Styliser les légendes
• Utilisez le code pour ajouter des légendes

Création de fichiers de sous-titres

Pour ajouter des sous-titres à une vidéo, vous devez d'abord créer un fichier de sous-titres. Brightcove Player nécessite que les sous-titres soient au format Web Video Text Tracks (WebVTT). (Si vous ingérez des sous-titres dans un compte Dynamic Delivery, vous pouvez ajouter des sous-titres DFXP ou SRT, et ceux-ci seront automatiquement convertis en sous-titres WebVTT.) Le format de fichier WebVTT est en texte simple et contient les données horaires suivies du sous-titre désiré ou du texte de sous-titre. Voici un extrait d'un fichier WebVTT.

WEBVTT

00:00:00.000 --> 00:00:07.080 align:middle line:90%

00:00:07.080 --> 00:00:10.280 align:middle line:84%
Hi, I'm Bob Bailey, a Learning
Specialist with Brightcove.

00:00:10.280 --> 00:00:12.780 align:middle line:84%
In this video, you'll learn
about how Video Cloud Studio is

00:00:12.780 --> 00:00:14.940 align:middle line:84%
organized and get a
brief overview of what

00:00:14.940 --> 00:00:17.490 align:middle line:90%
you can accomplish using it.

Pour plus d'informations sur le format WebVTT, cliquez sur ce lien. Vous devez disposer d'un fichier de légende distinct pour chaque langue que vous devez prendre en charge. Bien qu'il existe beaucoup d'outils tiers pour vous aider à créer des fichiers de sous-titres, Brightcove dispose de plusieurs partenaires qui proposent des services de conversion, de sous-titrage et de traduction. Visitez la section Partenaires de notre site internet pour obtenir la liste complète des partenaires Brightcove.

Si vous utilisez des vidéos Dynamic Delivery, vous pouvez également ingérer des sous-titres SRT ou DFXP, et Brightcove les convertira automatiquement en WebVTT. Voir le Ingestion de fichiers WebVTT (pistes de texte / légendes) document pour plus d'informations.

Inclure une balise <track>

Pour associer des fichiers de sous-titres WebVTT à un Brightcove Player, vous devez modifier le code d'intégration de l'encart pour inclure <track> tag pour chaque fichier de légende que vous avez. Par exemple :

<track kind="captions" src="<location of caption file>" srclang="en" label="English">

le <track> La balise est utilisée pour spécifier des sous-titres, des fichiers de sous-titres ou d'autres fichiers contenant du texte, qui doivent être visibles lors de la lecture du média. Les étapes pour ce faire sont décrites ci-dessous.

1. Générer le Avancée (In-Page) code d'intégration pour votre lecteur. Cela peut être fait en utilisant le Module média.
   Votre code doit ressembler à ceci:

   <video-js 
   	id="myPlayerID" 
       data-video-id="4230322585001" 
       data-account="20318290001" 
       data-player="default" 
       data-embed="default" 
       data-application-id 
       controls="" 
       width="640" height="360">
   </video-js>
   <script src="https://players.brightcove.net/20318290001/default_default/index.min.js"></script>

   <video-js 
   	id="myPlayerID" 
       data-account="20318290001" 
       data-player="d508c6e1-efa7-4aad-ba91-1a8db9761b8c" 
       data-embed="default" 
       data-application-id 
       controls="" 
       width="640" height="360">
   </video-js>
   <script src="https://players.brightcove.net/20318290001/default_default/index.min.js"></script>

2. Ajouter <track> étiquette (s) à l'intérieur du <video-js> balise qui pointe vers l'emplacement de tous les fichiers de sous-titres. Player Studio ne permet actuellement pas aux éditeurs de télécharger des fichiers de sous-titres WebVTT. L'URL de l'emplacement du fichier de sous-titres doit comporter moins de 250 caractères.
   
   Dans l'exemple ci-dessous, des fichiers de sous-titres anglais, japonais et français ont été spécifiés. Pour une liste complète des codes de langue, consultez le Référence du code de langage HTML.

   <video-js 
   	id="myPlayerID" 
       data-video-id="4230322585001" 
       data-account="20318290001" 
       data-player="default" 
       data-embed="default" 
       data-application-id 
       controls="" 
       width="640" height="360">
     <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs.vtt" srclang="en" label="English">
     <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-jp.vtt" srclang="ja" label="Japanese">
     <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-fr.vtt" srclang="fr" label="French">
   </video-js>
   <script src="https://players.brightcove.net/20318290001/default_default/index.min.js"></script>

   <video-js id="myPlayerID" 
   	data-account="20318290001" 
       data-player="d508c6e1-efa7-4aad-ba91-1a8db9761b8c" 
       data-embed="default" 
       data-application-id 
       controls="" 
       width="640" height="360">
     <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs.vtt" srclang="en" label="English">
     <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-jp.vtt" srclang="ja" label="Japanese">
     <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-fr.vtt" srclang="fr" label="French">
   </video-js>
   <script src="https://players.brightcove.net/20318290001/default_default/index.min.js"></script>
   

3. (Optionnel) Pour que les sous-titres s'affichent automatiquement lorsque la lecture de la vidéo démarre, vous devez apporter quelques modifications à votre page. Vous devez ajouter le default attribut au <track> balise pour la langue à afficher et définir et ajouter une petite quantité de code. Notez que le default l'attribut ne doit apparaître que sur un <track> marque. Par exemple, pour afficher les sous-titres en anglais lorsque la lecture de la vidéo commence, le <track> La balise serait modifiée comme suit:

   <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs.vtt" srclang="en" label="English" default>
   <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-jp.vtt" srclang="ja" label="Japanese">
   <track kind="captions" src="https://solutions.brightcove.com/bcls/assets/captions/intro-vcs-fr.vtt" srclang="fr" label="French">

   Le code nécessaire pour démarrer automatiquement les légendes désignées est:

   <script type="text/javascript">
     videojs.getPlayer('myPlayerID').ready(function () {
       var myPlayer = this;
       myPlayer.one("play", function () {
         //If you want to start English as the caption automatically
         myPlayer.textTracks()[1].mode = "showing";
       });
     });
   </script>

4. Publiez la page avec le lecteur. Lorsqu'un lecteur avec des sous-titres associés est publié, un bouton CC s'affiche sur le chrome du lecteur.

   

5. Cliquez sur le bouton CC pour sélectionner une langue de sous-titrage et afficher les sous-titres.

   

Légendes de style

Dans cette section, vous verrez comment styliser les légendes par programmation. Pour plus d'informations sur le style des légendes en modifiant le fichier WebVTT, ainsi que l'interface utilisateur du lecteur, consultez le Styliser les légendes document.

Deux méthodes sont essentielles pour styliser les légendes par programmation, à savoir:

• :player.textTrackSettings.setValues() Définit dynamiquement les styles sur les légendes d'un lecteur
• :player.textTrackSettings.saveSettings() Enregistre les paramètres dans le navigateur stockage local

setValues (objectOfStyles)

Il existe un ensemble limité de styles que vous pouvez modifier pour les légendes, qui sont détaillés ci-dessous. Un exemple d'utilisation de ces styles est illustré dans le code suivant et affichera les légendes comme indiqué dans la capture d'écran:

videojs.getPlayer('myPlayerID').ready(function () {
    var myPlayer = this;
    myPlayer.  textTrackSettings.setValues({
      backgroundColor: "#FF0",
      color: "#00F",
      fontFamily: "monospaceSansSerif",
      fontPercent: 1.5,
      windowColor: "#0FF",
      windowOpacity: "0.5"
    }) ;
});

Le tableau ci-dessous répertorie les styles de légende que vous pouvez modifier et les valeurs valides pour ces styles:

Pour les valeurs ci-dessus qui utilisent des couleurs, les valeurs de couleur valides sont affichées ici:

enregistrer les paramètres()

Une autre méthode qui pourrait être utile pour styliser les légendes est player.textTrackSettings.saveSettings(). Cette méthode enregistre dans le navigateur stockage local les paramètres actuels de style des légendes. La capture d'écran suivante de Chrome Application L'onglet affiche le stockage local de la page desservant le joueur et le nom de la clé, vjs-text-track-settings , et ses valeurs associées.

Cette méthode vous donne la possibilité de configurer les styles de légende à l'aide de l'interface utilisateur du lecteur, puis d'enregistrer les paramètres et de copier les valeurs à utiliser avec player.textTrackSettings.setValues() , Comme montré ci-dessus.

Implémenter à l'aide

Il est possible d'ajouter par programme des pistes de texte pour les légendes. La méthode clé pour cette fonctionnalité est addRemoteTextTrack() , dont la syntaxe est:

playerObject.addRemoteTextTrack({
  kind: string,
  language: string,
  label: string,
  src: string
});

où :

• kind- Type de piste de texte, pour cette utilisation 'légendes'
• language- Code de langue à deux lettres, par exemple 'en'
• label- Le libellé de la langue qui apparaît dans l'interface utilisateur des sous-titres, par exemple 'Anglais'
• src- URL du fichier de sous-titres au format WebVTT

L'appel de fonction renvoie un objet de type vjs.TextTrack.

Exemple d'utilisation:

var frTrack = myPlayer.addRemoteTextTrack({
  kind: 'captions',
  language: 'fr',
  label: 'French',
  src: 'https://solutions.brightcove.com/bcls/captions/adding_captions_to_videos_french.vtt'
});

Vous devez attendre le loadedmetadata événement à envoyer avant d'utiliser le addRemoteTextTrack() méthode. L'exemple suivant montre le bloc de script permettant d'ajouter des sous-titres en anglais et en français à une vidéo.

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function () {
    var myPlayer = this;
    myPlayer.one("loadedmetadata", function () {
      var enTrack = myPlayer.addRemoteTextTrack({
        kind: 'captions',
        language: 'en',
        label: 'English',
        src: 'https://solutions.brightcove.com/bcls/captions/adding_captions_to_videos.vtt'
      });
      var frTrack = myPlayer.addRemoteTextTrack({
        kind: 'captions',
        language: 'fr',
        label: 'French',
        src: 'https://solutions.brightcove.com/bcls/captions/adding_captions_to_videos_french.vtt'
      });
    });
  });
</script>

La méthode complémentaire textTracks() vous permet de récupérer toutes les pistes de texte attribuées à un lecteur. La méthode retourne un objet de type vjs.TextTrackList.

Diffusion en direct avec sous-titres

Jusqu'à ce point dans le document, les légendes ont été livrées dans un fichier séparé et associées à une vidéo via l'élément <track>. Ce type de légendes est parfois appelé hors bande. La méthode alternative consiste à incorporer les données de sous-titres directement dans le contenu vidéo, souvent des flux vidéo en direct, et est parfois appelée en bande légendes.

Brightcove Live prend actuellement en charge 608 sous-titres in-band (à l'intérieur des en-têtes h.264). Si les légendes se trouvent à l'intérieur du signal d'entrée h.264 (correctement signalées dans le paquet user_data), elles sont transmises aux sorties h.264.

Si vous utilisez un encodeur en direct Elemental broadcast, vous pouvez obtenir des sous-titres de SDI (EIA-608/CEA-608) ou d'autres sources (SCTE-20, SCC, Télétexte, DVB-sub, Ancillary, ARIB, TTML, SCTE-27, STL, SRT, SMI) et les mettre dans le flux h.264 que vous nous envoyez. D'autres encodeurs de qualité diffusion peuvent probablement faire la même chose, mais nous ne les avons pas testés formellement.

Les sous-titres WebVTT ne sont pas pris en charge pour les flux en direct.

Brightcove Player prend en charge les sous-titres dans la bande, et donc Live avec sous-titres, intégré à HLS, aucun plug-in n'est donc nécessaire. L'implémentation de Brightcove Player fonctionnera partout où le HLS natif n'est pas utilisé. Si le HLS natif est utilisé, la prise en charge des sous-titres intrabande dépend du système d'exploitation et du navigateur. Par exemple, le HLS natif d'iOS prend entièrement en charge les sous-titres dans la bande.

Contraintes

• Les sous-titres sont pris en charge sur les types de dispositifs et de systèmes d'exploitation suivants.
  • iOS 9+
  • Android 4+
  • Internet Explorer 8+
  • Les dernières versions des navigateurs de bureau Chrome, Safari et Firefox
• Parce que Safari utilise les capacités natives pour le style des légendes, le Paramètres des sous-titres l'option de menu n'est pas disponible dans le CC menu sur les navigateurs Safari (à la fois iOS et macOS).
• Comme indiqué précédemment dans le document, et répété ici, pour les utilisateurs d'appareils iOS, lorsque vous regardez des vidéos avec des sous-titres et des publicités, nous vous suggérons de sélectionner explicitement une piste et de ne pas régler les sous-titres sur Auto (recommandé) pendant la lecture de la vidéo. L'utilisation du paramètre Auto (recommandé) peut afficher des sous-titres incorrects pour les publicités. Notez que l'utilisation du paramètre Auto (recommandé) n'affecte pas l'affichage des sous-titres pour la vidéo réelle. Les téléspectateurs verront les sous-titres vidéo pour les publicités, mais une fois que la vidéo commencera à jouer (pré-rolls) ou reprendra (mid-rolls), les sous-titres apparaîtront comme prévu. Notez également que cette option "Auto" ne peut pas être supprimée en raison d'une limitation du système d'exploitation d'Apple. Les appareils Apple utilisent leur propre lecteur natif, il n'est donc pas possible de personnaliser les options de légende.