Chargeur de lecteur Brightcove

Dans cette rubrique, vous apprendrez à utiliser le Brightcove Player Loader pour charger un Brightcove Player à l'aide d'outils de construction modernes. Cette bibliothèque est vue comme un outil pour des clients plus techniques.

Présentation du chargeur de lecteur

Pour les utilisateurs de Brightcove Player ne souhaitant pas copier et coller les implémentations du lecteur intégré ou iframe dans la page, ce module est intégré à leur application Web et fournit un moyen d'utiliser Brightcove Players sans avoir besoin d'écrire un code d'intégration pour télécharger leur joueurs et intégrez-les. Cet outil résout le problème avec une bibliothèque Brightcove qui peut télécharger n'importe quel Brightcove Player publié et l'intégrer dans le DOM.

Cette bibliothèque prend en charge les navigateurs à feuilles persistantes courants, Chrome, Firefox, Edge et Safari.

Ce document fournit essentiellement des exemples d'utilisation du Brightcove Player Loader. Pour plus de détails, consultez la bibliothèque brightcove / lecteur-chargeur Dépôt GitHub.

Il existe un pack Web qui peut être utilisé avec Brightcove Player. Les détails à ce sujet peuvent être trouvés dans le player-loader-webpack-plugin Dépôt GitHub.

Installation

La bibliothèque est installée à l'aide de NPM, à l'aide des éléments suivants :

npm install --save @brightcove/player-loader

Y compris la bibliothèque

Pour différentes méthodes d'inclusion de la bibliothèque pour votre utilisation, veuillez consulter le Dépôt GitHub pour la bibliothèque.

Mise en œuvre à l'aide d'une promesse

Vous pouvez utiliser un Promesse JavaScript avec la bibliothèque. Les promesses ne sont pas nécessaires pour que cette bibliothèque fonctionne, mais elles sont recommandées. Par défaut, cette bibliothèque recherchera une promesse globale. Cependant, vous pouvez explicitement fournir une implémentation Promise via le Promise paramètre, détaillé plus loin dans ce document.

Ce qui suit montre une implémentation de la bibliothèque à l'aide d'une promesse. Un concept clé est que vous obtenez une référence au joueur en utilisant var myPlayer = success.ref; dans le then section de traitement de la promesse:

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      height: 344px;
      width: 610px;
    }
  </style>

</head>

<body>
  <script src="brightcove-player-loader.min.js"></script>

  <div id="theDiv">
  </div>

  <script>
    brightcovePlayerLoader({
      refNode: document.querySelector('#theDiv'),
      accountId: '1752604059001',
      playerId: 'wHBRh9M3o',
      videoId: '4607357817001'
    })
    .then(function(success) {
      var myPlayer = success.ref;
      console.log('success', success);
      myPlayer.on('loadedmetadata',function(){
        myPlayer.muted(true);
        myPlayer.play();
      });
    })
    .catch(function(error) {
      console.log('error', error);
    })
  </script>

</body>

</html>

Implémentation à l'aide de callbacks

Vous pouvez également implémenter le chargeur de lecteur à l'aide de rappels via le onSuccess et onFailure fonctions de rappel.

Ce qui suit montre une implémentation de la bibliothèque à l'aide de rappels. Un concept clé est que vous obtenez une référence au joueur en utilisant var myPlayer = success.ref; dans le onSuccess fonction de rappel:

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      height: 344px;
      width: 610px;
    }
  </style>

</head>

<body>
  <script src="brightcove-player-loader.min.js"></script>

  <div id="theDiv">
  </div>

  <script>
  brightcovePlayerLoader({
    refNode: document.querySelector('#theDiv'),
    accountId: '1752604059001',
    playerId: 'wHBRh9M3o',
    videoId: '4607357817001',
    onSuccess: function(success) {
      var myPlayer = success.ref;
      console.log('success', success);
      myPlayer.on('loadedmetadata',function(){
        myPlayer.muted(true);
        myPlayer.play();
      });
    },
    onFailure(error) {
      console.log('error', error);
    }
  });
  </script>

</body>

</html>

Utilisation des restrictions de lecture

Pour utiliser les restrictions de lecture avec le chargeur de lecteur Brightcove, il suffit d'obtenir une référence au lecteur et de lui transmettre la clé Web JSON (JWT).

Voici un exemple :

    <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <title>Brightcove Player</title>
          <meta charset="UTF-8">
          <script crossorigin
              src="player-loader/dist/brightcove-player-loader.min.js"></script>
      </head>
      
      <body>
          <main>
              <h1>Brightcove Player</h1>
              <div id="theDiv"></div>
      
          </main>
      </body>
      <script>
          var myJwtToken = "your jwt token";
          var myVideoId = "your video Id";
      
          // +++ Add the Brightcove Player +++
          brightcovePlayerLoader({
              refNode: document.querySelector('#theDiv'),
              accountId: 'your account Id',
              playerId: 'your player Id',
            onSuccess: function (success) {
              // Get a reference to the BC Player
              var myPlayer = success.ref;
              console.log('success', success);
              
              myPlayer.ready(function () {
                // This should ideally be set in the player configuration
                myPlayer.catalog.setPolicyKey(null);
                myPlayer.catalog.setBcovAuthToken(myJwtToken);
                myPlayer.catalog.get({
                  id: myVideoId,
                  type: 'video'
              }).
                  then(function (data) {
                    myPlayer.catalog.load(data);
                    myPlayer.muted(true);
                    myPlayer.play();
                  }).
                  catch(function (error) {
                    throw new Error(error);
                  });
              });
            },
            onFailure(error) {
              console.log('error', error);
            }
          });
    </script>
    </html>

Paramètres disponibles

Nom: accountId

Type de données : chaîne | numéro

La description:
Un identifiant de compte Video Cloud.

Nom: applicationId

Type de données : chaîne

Description :
L'ID d'application à appliquer à l'intégration générée.

Nom: catalogSearch

Type de données: chaîne | Objet

Description :
Une recherche dans le catalogue Video Cloud à effectuer. Cela peut être une simple recherche de chaîne ou un objet qui correspond au Catalogue getSearch() méthode. Si une valeur autre que chaîne n'est pas sérialisable en JSON est donnée, ce paramètre sera ignoré.

Nom: catalogSequence

Type de données : Array | Objet


La description:
Une séquence de catalogue Video Cloud à exécuter. Voir le Catalogue getLazySequence() méthode pour plus d'informations. Si une valeur autre que chaîne n'est pas sérialisable en JSON est donnée, ce paramètre sera ignoré.

Nom: embedId

Type de données:chaîne

La description:
ID d'intégration du lecteur Brightcove pour le lecteur. La valeur par défaut est 'default'. La valeur par défaut est correcte pour la plupart des utilisateurs.

Nom: embedOptions

Type de données : Objet

La description:
Utilisé pour fournir certaines options pour la génération incorporée. Il s'agit notamment de :

embedOptions.pip booléen Si true , enveloppera l'intégration dans un <div class="vjs-pip-container"> élément. Ceci doit être utilisé lorsque vous avez besoin d'assistance pour le Plug-in Brightcove Picture-in-Picture. La valeur par défaut est false.
embedOptions.playlist booléen Si true , ajoutera un <div class="vjs-playlist"> élément après l'intégration. Ceci doit être utilisé lorsque vous avez besoin d'assistance pour le Plug-in de l'interface utilisateur Brightcove Playlist. La valeur par défaut est false.
embedOptions.responsive booléen | Objet Utilisé pour personnaliser le code d'intégration pour produire un lecteur de taille réactive à l'aide du intrinsic ratio approche wrapper. Lorsque la valeur est true, produira un code incorporé réactif avec un rapport hauteur / largeur 16: 9 qui remplira son conteneur. La valeur par défaut est false.
Un objet peut être fourni pour personnaliser cela avec les sous-propriétés suivantes:
  • :aspectRatio Chaîne utilisée pour personnaliser le rapport hauteur / largeur sur une valeur autre que 16: 9 (par exemple, «4: 3»).
  • :maxWidth Une chaîne utilisée pour limiter la largeur maximale du joueur. Cela devrait utiliser des unités CSS, telles que des pixels (par exemple, «960px»).
embedOptions.unminified booléen Si true , utilisera la version non minifiée du lecteur. Cela peut être utile à des fins de débogage, mais entraîne le coût d'un téléchargement de lecteur plus important. Non recommandé pour la production! La valeur par défaut est false.
Nom: embedType

Type de données : chaîne

La description:
Le type de code incorporé à produire. La valeur de ce paramètre doit être l'une des suivantes :

  • 'in-page' ou brightcovePlayerLoader.EMBED_TYPE_IN_PAGE: Également appelé code d'intégration avancé, il injecte le lecteur directement dans la page Web de niveau supérieur.
  • 'iframe' ou brightcovePlayerLoader.EMBED_TYPE_IFRAME: Également appelé code d'intégration de base, il injecte le lecteur en tant qu'élément <iframe>.
La valeur par défaut est 'in-page'.
Nom: onEmbedCreated

Type de données : Fonction (élément)

La description:
Un rappel utilisé pour personnaliser l'élément incorporé (soit video-js élément ou un iframe élément) avant d'être inséré dans le DOM ou personnalisé à la suite de embedOptions et avant que le lecteur ne soit téléchargé et initialisé. L'élément embed peut être muté ou, si ce rappel renvoie un élément, cet élément sera utilisé comme élément incorporé. Les cas d'utilisation potentiels sont l'ajout / la suppression d'attributs ou l'ajout d'éléments enfants, tels que des sources ou des pistes.

Nom: onFailure

Type de données : Fonction (erreur)

La description:
Une fonction de rappel qui permet de gérer les échecs lorsque Promise n'est pas disponible ou n'est pas souhaité. Le fait de passer cette fonction empêchera le renvoi d'un Promise. Il obtient un seul Error objet comme argument. La valeur renvoyée de cette fonction est ignorée.

Nom: onSuccess

Type de données : Fonction (objet)

La description:
Une fonction de rappel qui permet de gérer les réussites lorsque Promise n'est pas disponible ou n'est pas souhaité. Le fait de passer cette fonction empêchera le renvoi d'un Promise. Il obtient un seul Success objet comme argument. La valeur renvoyée de cette fonction est ignorée.

Nom: options

Type de données : Objet

La description:
Un Video.js objet d'options passer lors du processus de création du joueur. Ces options prévaudront sur tous les paramètres spécifiés dans la configuration du lecteur Brightcove. Ce paramètre ne peut pas être utilisé avec les incorporations iframe.

Nom: playerId

Type de données : chaîne

La description:
Un identifiant de joueur Brightcove Player. La valeur par défaut est 'default'.

Nom: playlistId

Type de données : chaîne | numéro

Description :
Un ID de playlist Video Cloud ou un ID de référence de playlist.

Nom: playlistVideoId

Type de données : chaîne | numéro

Description :

Un ID vidéo Video Cloud qui se trouverait dans la playlist résultante spécifiée par playlistId. Ce paramètre est ignoré si playlistId est manquant.

Nom: Promise

Type de données : Fonction (Fonction)

La description:
Utilisé pour fournir explicitement un Promise la mise en oeuvre. S'il est fourni, il sera utilisé à la place de tout Promise. La valeur par défaut est window.Promise

Nom: refNode

Type de données : Element | chaîne

Description :
Required
L'élément DOM dans lequel le lecteur sera intégré. S'il n'est pas fourni comme élément DOM, il peut être fourni sous forme de chaîne, qui sera transmise à document.querySelector.

Nom: refNodeInsert

Type de données : chaîne

La description:
La manière dont le lecteur sera inséré par rapport à l'élément DOM de référence (spécifié par refNode). La valeur de ce paramètre doit être l'une des suivantes :

  • 'append' ou brightcovePlayerLoader.REF_NODE_INSERT_APPEND: Le joueur sera le dernier enfant du nœud de référence.
  • 'prepend' ou brightcovePlayerLoader.REF_NODE_INSERT_PREPEND: Le joueur sera le premier enfant du nœud de référence.
  • 'before' ou brightcovePlayerLoader.REF_NODE_INSERT_BEFORE: Le joueur sera le frère précédent du nœud de référence.
  • 'after' ou brightcovePlayerLoader.REF_NODE_INSERT_AFTER: Le joueur sera le prochain frère après le nœud de référence.
  • 'replace' ou brightcovePlayerLoader.REF_NODE_INSERT_REPLACE: Le nœud de référence sera supprimé et remplacé par le joueur.

Nom: videoId

Type de données : chaîne | numéro

La description:
Un ID vidéo ou un ID de référence vidéo Video Cloud.