Exemple de joueur Brightcove : Chargement dynamique du lecteur

Dans cette rubrique, vous apprendrez à charger le Brightcove Player de manière dynamique, c'est-à-dire sur un événement utilisateur et NON dans le code HTML initialement écrit.

Exemple de lecteur

Dans cet exemple, vous cliquez sur le Ajouter un joueur pour créer et charger dynamiquement le lecteur, puis lire la vidéo.

Voir le stylo 18169-chargement-joueur-dynamiquement 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
jouer ()
en sourdine ()

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. Bien sûr, pour cet exemple, le code du lecteur n'est PAS initialement placé dans la page HTML, il est construit et injecté dynamiquement.

Autre HTML

UNE <button> est ajouté à la page HTML qui déclenche la construction et l'injection du lecteur. Aussi un <div> L'élément est ajouté comme emplacement d'injection.

Flux d'application

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

  • Définissez des valeurs variables avec l'ID de compte, l'ID du joueur et l'ID vidéo que vous souhaitez utiliser.
  • Lors d'un clic sur le bouton, un <video> La balise est construite en utilisant une simple concaténation de chaînes et cette chaîne est injectée dans la page HTML.
  • Un joueur valide <script> La balise est également construite et injectée dans la page HTML. Lorsque cela est fait, le JavaScript sera exécuté sur la page, envoyant un onload un événement. dans le onload gestionnaire d'événements, appelez la fonction qui initialise le lecteur.
  • Dans la fonction appelée, utilisez le bc() pour initialiser la balise vidéo générique dans un Brightcove Player, puis appelez le play() méthode.

Fournir l'ID de compte, l'ID du joueur et l'ID vidéo souhaités

Trouvez le code étiqueté :

// ### Set the data for the player ###

Attribuez aux variables les valeurs souhaitées pour la configuration du lecteur.

Construisez le code d'implémentation intégré dans la page du lecteur et injectez-le dans la page

Trouvez le code étiqueté :

// ### Build the player and place in HTML DOM ###

C'est du travail JavaScript. Utilisez la concaténation de chaînes pour créer un <video> marque. Vous injectez ensuite la balise dans la page HTML. Ensuite, vous créez un lecteur Brightcove valide <script> marque. Lorsque vous ajoutez ceci à la page HTML, le JavaScript sera automatiquement exécuté. Cela crée un onload événement, pour lequel vous pouvez écrire un gestionnaire.

Initialisez le lecteur en tant que lecteur Brightcove et lisez la vidéo

Trouvez le code étiqueté :

// ### Initialize the player and start the video ###

Vous utilisez la norme bc() méthode pour initialiser le lecteur générique en tant que lecteur Brightcove, puis lire la vidéo à l'aide de play() méthode.

Style d'application

Le seul CSS contrôle la taille du lecteur.

implémentation iframe

L'implémentation iframe peut être utilisée de la même manière que celle illustrée ci-dessus. Exemple de code est disponible. Si vous souhaitez que la vidéo soit lue au chargement, la meilleure chose à faire est dans Studio de définir le lecteur Démarrage automatique propriété à Oui.

Code du plug-in

Le code de cet exemple ne fonctionnera pas en tant que plugin Brightcove Player, car le lecteur doit exister avant qu'un plugin puisse être enregistré avec lui. Bien sûr, vous pouvez enregistrer le JavaScript dans un fichier séparé et l'importer si vous le souhaitez.

Supprimer un joueur

Vous souhaiterez peut-être supprimer dynamiquement un joueur. Pour ce faire, vous devez utiliser le myPlayer.dispose() méthode. Vous ne souhaitez PAS supprimer le lecteur du DOM via JavaScript car cela pourrait provoquer des fuites de mémoire. Lorsque vous utilisez le dispose() méthode, le joueur se supprimera du DOM.