Exemple de joueur Brightcove : Télécharger la transcription

Dans cette rubrique, vous apprendrez à utiliser le fichier de légendes WebVTT et à le convertir en une transcription téléchargeable.

Exemple de lecteur

La vidéo dans le CodePen ci-dessous utilise le fichier WebVTT suivant pour définir les sous-titres:

WEBVTT

00:00.000 --> 00:05.000 align:middle line:90%
The waves rhythmically pound against the rocks.

00:05.000 --> 00:10.000 align:middle line:84%
Here in the quaint village of Yachats on the central Oregon coast.

00:10.000 --> 00:15.000 align:middle line:84%
Come visit and enjoy the surf and sand.

00:15.000 --> 00:19.000 align:middle line:84%
Remember, it never rains on the Oregon coast!

L'échantillon fournit un Télécharger la transcription bouton dans la barre de contrôle qui télécharge un fichier texte avec le formatage WebVTT supprimé du fichier. Essentiellement, il permet à l'utilisateur de télécharger une transcription des légendes basée sur une version modifiée du fichier WebVTT.

Voir le stylo Télécharger la transcription par Brightcove Learning Services ( rcrooks1969 ) sur CodePen.

Code source

Voir le solution complète sur GitHub.

Utilisation du CodePen

Voici quelques conseils pour utiliser efficacement le CodePen ci-dessus :

  • Basculez l'affichage réel du joueur en cliquant sur le Result bouton.
  • Cliquez sur les HTML/CSS/JS boutons pour afficher L'UN des types de code.
  • Plus loin dans ce document, la logique, le flux et le style utilisés dans l'application seront discutés dans la configuration Plateur/HTML, le flux d'application et le style de l'application. sections. La meilleure façon de suivre les informations contenues dans ces sections est de :
    1. Cliquez sur le EDIT ON CODEPEN bouton dans le CodePen et ayez le code disponible dans un onglet navigateur/navigateur.
    2. Dans CodePen, réglez le code que vous souhaitez afficher. Vous pouvez modifier la largeur de différentes sections de code dans CodePen.
    3. Voir le Configuration du lecteur/HTML , Flux de candidature et/ou Style d'application sections dans un autre navigateur/onglet de navigateur. Vous pourrez maintenant suivre les explications du code et en même temps afficher le code.

Séquence de développement

Voici la séquence de développement recommandée :

  1. Utilisez l'implémentation du lecteur intégré In-Page pour tester les fonctionnalités de votre lecteur, de votre plugin et de votre CSS (si CSS est nécessaire)
  2. Placez le JavaScript et le CSS du plugin dans des fichiers séparés pour des tests locaux
  3. Déployez le code du plugin et le CSS sur votre serveur une fois que vous avez corrigé des erreurs.
  4. Utilisez Studio pour ajouter le plugin et le CSS à votre lecteur
  5. Remplacez l'implémentation du lecteur intégré dans la page si vous déterminez que l'implémentation iframe est mieux adaptée (détaillée dans la section suivante)

Pour plus de détails sur ces étapes, consultez la section étape par étape : Guide de développement de plug-ins.

Intégrer iFrame ou In-Page

Lorsque vous développez des améliorations pour Brightcove Player, vous devrez décider si le code convient le mieux à l'implémentation intégrée iframe ou In-Page. La recommandation des meilleures pratiques consiste à créer un plugin à utiliser avec une implémentation iframe. Les avantages de l'utilisation du lecteur iframe sont les suivants :

  • Aucune collision avec JavaScript et/ou CSS existants
  • Réactif automatiquement
  • L'iframe facilite l'utilisation dans les applications de médias sociaux (ou lorsque la vidéo devra « voyager » dans d'autres applications)

Bien que l'intégration du lecteur d'intégration dans la page puisse être plus complexe, il y a des moments où vous planifiez votre code autour de cette implémentation. Pour généraliser, cette approche est préférable lorsque la page contenante doit communiquer avec le lecteur. En particulier, voici quelques exemples :

  • Le code dans la page contenant doit écouter et agir sur les événements du joueur
  • Le lecteur utilise des styles de la page contenante
  • L'iframe entraînera l'échec de la logique de l'application, comme une redirection à partir de la page contenant

Même si votre implémentation finale n'utilise pas le code iframe, vous pouvez toujours utiliser le code intégré In-Page avec un plugin pour votre JavaScript et un fichier séparé pour votre CSS. Cela encapsule votre logique afin que vous puissiez facilement l'utiliser sur plusieurs joueurs.

Ressources API/Plugin utilisées

Méthodes API Événements API Propriétés de l'API
au() Chargement info player.media.com
player.controlBar.customControlSpacer.el ()    

Configuration du lecteur/HTML

Cette section détaille toute configuration spéciale nécessaire lors de la création du lecteur. En outre, d'autres éléments HTML qui doivent être ajoutés à la page, au-delà du code d'implémentation du lecteur intégré dans la page, sont décrits.

Configuration du lecteur

Aucune configuration spéciale n'est requise pour le lecteur Brightcove que vous créez pour cet exemple.

Autre HTML

Aucun autre élément HTML n'est ajouté à la page.

Flux d'application

La logique de base derrière cette application est la suivante :

  • Créez une expression régulière pour supprimer le formatage WebVTT du fichier.
  • Attends le loadstart événement et récupérez l'URL du fichier WebVTT de légendes.
  • Créez un bouton et placez-le dans la barre de contrôle.
  • En cliquant sur le bouton, téléchargez le fichier WebVTT distant à l'aide d'un XMLHttpRequest() objet.
  • Utilisez le download Bibliothèque JavaScript pour que le navigateur télécharge le fichier.

Définir l'expression régulière

Trouvez le code étiqueté :

// ### Define the regular expression ###

Vous devez créer une expression régulière pour supprimer toute mise en forme indésirable du fichier WebVTT. Dans ce cas, l'expression régulière supprime les lignes qui commencent par la manière standard de définir les heures dans un fichier WEBVTT. Si vous n'êtes pas un expert en regex, vous trouverez peut-être https://regexr.com/ d'aide.

Récupérer l'URL et obtenir le fichier

Trouvez le code étiqueté :

// ### Retrieve the URL for the text track, which is in this case a WebVTT caption file ###

Vous devez attendre le loadstart événement pour accéder au mediainfo propriété, qui contient les informations de piste de texte. Notez que si la page est diffusée à partir d'un (https ), vous devez modifier l'URL du fichier pour utiliser également une connexion sécurisée. Une fois que vous avez l'URL correcte, vous appelez le getFile() méthode qui renvoie réellement le fichier. Enfin, vous utilisez le JavaScript replace() en conjonction avec l'expression régulière pour reformater le texte.

Construisez un bouton et placez-le dans la barre de contrôle

Trouvez le code étiqueté :

// ### Create button and place in player ###

Un HTML bouton L'élément est construit et placé dans la barre de contrôle. Notez que le click l'écouteur d'événements est également ajouté dynamiquement. Dans ce cas, le bouton est placé dans le spacer région de la barre de contrôle. Pour plus de détails sur spacer , voir le Personnalisation de l'apparence du lecteur document.

Obtenez le fichier en fonction de l'URL fournie

Trouvez le code étiqueté :

// ### Function that gets the actual file based on URL ###

Cette fonction utilise AJAX, via un XMLHttpRequest objet, pour récupérer le fichier. Le comportement asynchrone dicte l'utilisation d'une fonction de rappel.

Téléchargez le fichier modifié sur l'ordinateur de l'utilisateur

Trouvez le code étiqueté :

// ### download function used for graceful browser download ###

Comme mentionné précédemment dans ce document, les comportements des navigateurs par défaut ne sont probablement PAS ce que vous souhaitez, c'est-à-dire qu'un nouvel onglet ou une nouvelle fenêtre s'ouvre pour afficher le fichier. Cet outil JavaScript force un téléchargement de fichier du fichier texte.

Style d'application

Le CSS définit les couleurs et la position des boutons dans la barre de contrôle.

Code du plug-in

Normalement, lors de la conversion du JavaScript en plugin Brightcove Player, des modifications nominales sont nécessaires. Une modification requise consiste à remplacer l'utilisation standard de la ready() méthode par le code qui définit un plugin.

Voici le code de début de JavaScript très couramment utilisé qui fonctionnera avec le lecteur :

videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
});

Vous allez modifier la première ligne pour utiliser la syntaxe standard pour démarrer un plugin Brightcove Player :

videojs.registerPlugin('pluginName', function(options) {
var myPlayer = this;
...
});

Comme mentionné précédemment, vous pouvez voir le code JavaScript du plugin dans le référentiel GitHub correspondant de ce document: download-transcript.js.

Utilisation du plugin avec un lecteur

Une fois que les fichiers CSS et JavaScript du plugin sont stockés dans un emplacement accessible à Internet, vous pouvez utiliser le plugin avec un lecteur. Dans les studios JOUEURS module, vous pouvez choisir un joueur, puis dans le PLUGINS section ajouter les URL aux fichiers CSS et JavaScript, et également ajouter le Nom et Options , si des options sont nécessaires.