Étape par étape : Lecteur Brightcove

Aperçu

Ce document fournit une introduction pratique à la création d'un lecteur Brightcove, puis à l'utilisation de deux implémentations de code différentes pour publier une vidéo à l'aide du lecteur nouvellement créé. Vous commencerez également par programmation la lecture de la vidéo, puis vous ajouterez un plugin au lecteur.

Dans ce démarrage rapide, vous effectuerez les tâches suivantes:

Créer un lecteur à l'aide de Studio
Publier une vidéo dans le lecteur à l'aide de Studio
Utilisez l'implémentation du lecteur iframe
Utiliser l'implémentation d'intégration des encarts
Lire la vidéo par programme
Ajouter le plugin de superposition au lecteur

Créer un joueur

Pour créer un lecteur, procédez comme suit.

Connectez-vous à Studio à https://studio.brightcove.com/ .
Le nom du compte actuel apparaît dans le coin supérieur gauche de la page, sous le nom du produit (dans ce cas Video Cloud). Lorsque vous cliquez sur votre profil , vous verrez votre compte courant et vos autres comptes (le cas échéant). Il suffit de cliquer sur le compte sur lequel vous souhaitez travailler.
Cliquez sur le lien Joueurs dans la navigation principale.
Cliquez sur le bouton Add player .
Remplissez les champs Name et Short Description du lecteur. Pour ce démarrage rapide, le nom du lecteur sera Sample Player.
Cliquez sur Save.
Confirmez que le lecteur nouvellement créé apparaît dans la liste des joueurs.

Publier une vidéo dans un lecteur

Ensuite, vous publiez une vidéo dans le lecteur nouvellement créé dans le module médias. Une fois que vous avez associé la vidéo à votre lecteur, vous publiez la vidéo et aurez ensuite accès à trois implémentations pour visionner la vidéo dans votre lecteur.

Pour publier une vidéo dans votre lecteur, procédez comme suit:

Dans Studio, accédez au module Media en cliquant sur l'icône Media dans la barre de navigation principale.
Cliquez sur la ligne correspondant à la vidéo que vous souhaitez publier dans votre lecteur, puis cliquez sur Publier et intégrer > Publier sur le Web.
Remarque : Si la vidéo comporte une piste audio, vous n'entendrez pas l'audio plus tard lorsque vous publierez la vidéo dans le lecteur. La raison en est que vous ferez jouer la vidéo automatiquement et que l'audio n'est pas autorisé dans ce cas. Voir le document Considérations relatives à la lecture automatique pour plus d'informations sur la lecture de vidéos sans interaction de l'utilisateur.
Dans le menu déroulant Select Player , choisissez le lecteur que vous venez de créer.
Vous avez désormais accès aux trois implémentations du player: la norme (iframe), Avancée (Encart) et un Aperçu dans le navigateur URL. Ne fermez pas cette fenêtre car vous allez en copier du code plusieurs fois plus tard dans ce démarrage rapide.

Vous utiliserez l'éditeur JSON pour ajouter une vidéo au lecteur. Pour configurer le contenu vidéo, procédez comme suit.

Cliquez sur le lien de Sample Player pour ouvrir la page des propriétés du lecteur.
Cliquez sur JSON Editor dans le menu de navigation de gauche.
Placez une virgule après l'accolade DEUXIÈME À LA DERNIÈRE dans le JSON.

Juste au-dessus de la dernière accolade de fermeture, ajoutez ce qui suit pour attribuer une vidéo et une affiche au lecteur. Bien sûr, vous pouvez remplacer votre propre vidéo et affiche.

 "media": { "sources": [{
 "src": "//solutions.brightcove.com/bcls/assets/videos/BirdsOfAFeather.mp4", "type": "video/mp4"
 }],
 "poster": {
 "highres": "//solutions.brightcove.com/bcls/assets/images/BirdsOfAFeather.jpg"
 }
 }

Votre JSON doit ressembler à ce qui suit (le texte ajouté est surligné en jaune):
Cliquez sur Enregistrer.

Cliquez sur Publier et intégrer et alors Publier les modifications pour publier votre lecteur.
Dans la même boîte de dialogue où vous avez publié vos modifications, vous pouvez également copier le code d'implémentation du lecteur Standard (iframe) ou Avancé (incorporé dans la page). Notez que le code d'implémentation reflétera le Dimensionnement ( Sensible ou Fixé ), Ratio d'aspect et Dimensions choix effectués et enregistrés dans le Informations sur le joueur options.
Copiez les deux types d'implémentation de code dans un fichier texte pour une utilisation ultérieure.

Utiliser le code standard

Créez une page HTML et collez le la norme (iframe) code de l'étape précédente dans le corps.
Lorsque vous parcourez cette page, vous verrez que la vidéo reflète les choix de taille ( réactif ou fixe ), de rapport d'aspect et de dimensions .

Utiliser l'intégration avancée code

Dans cette section, vous utiliserez l'implémentation de code avancé (intégré dans la page).

Revenez à la boîte de dialogue de publication dans Video Cloud Studio.
Voir le Avancée code et cliquez sur le Fixé bouton radio pour Dimensionnement.
Les Sensible le dimensionnement inclut HTML pour rendre le lecteur réactif. Dans cette activité, l'accent est mis sur le code du joueur, nous utiliserons donc le plus simple Fixé dimensionnement.
Créez une page HTML et collez le Avancée (in-page embed) code d'en haut, dans le corps.
Examinez le code, qui ressemblera à ce qui suit (insérez des retours à la ligne comme indiqué pour faciliter la lecture du code du lecteur), et notez les attributs :
```
 <video-js data-account="1507807800001"
  data-player="EUYJo0AOB"
  data-embed="default"
  controls=""
  data-video-id="6071787405001"
  data-playlist-id=""
  data-application-id=""
  width="640" height="360"></video-js>
<script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
```
- data-account : Le numéro de compte
- data-player : L'ID du joueur Brightcove
- data-embed : Soit default si le lecteur est une intégration parent ou l'ID du lecteur parent ; reportez-vous au Guide d' intégration des API pour plus d'informations sur l'intégration (joueurs parents/enfants)
- controls : Agit comme un booléen si les contrôles du joueur doivent être présents ( controls attribut inclus dans la balise), ou non affiché ( controls attribut non présent dans la balise)
- data-video-id: L'identifiant de la vidéo du nuage de vidéos (à ne pas utiliser si vous fournissez un identifiant de liste de lecture)
- data-playlist-id: L'identifiant de la liste de lecture Video Cloud (à ne pas utiliser si vous fournissez un identifiant vidéo)
- data-application-id: Vous permet de réutiliser un seul joueur, mais de différencier les analyses sur une base par site ou par application; voir Ajout d'un ID d'application au Player Embed Code pour plus d'informations
- width & height: Définit les dimensions du lecteur.
- <script> marque: Chaque fois que vous utilisez le code sur la page, il y aura un accompagnement script marque; le fichier JavaScript référencé contient tous les JavaScript et CSS associés au lecteur particulier
Examinez le code, qui apparaîtra semblable au suivant, et notez les attributs :
```
 <video data-account="1507807800001"
 data-player="H15p1gTkg"
 data-embed="default"
 data-application-id
 controls=""></video>
 <script src="https://players.brightcove.net/1507807800001/H15p1gTkg_default/index.min.js"></script>
```
- data-account : Le numéro de compte
- data-player : L'ID du joueur Brightcove
- data-embed : Soit default si le lecteur est une intégration parent ou l'ID du lecteur parent ; reportez-vous au Guide d' intégration des API pour plus d'informations sur l'intégration (joueurs parents/enfants)
- class: La classe CSS standard Brightcove Player associée au code d'intégration dans la page
- controls : Agit comme un booléen si les contrôles du joueur doivent être présents ( controls attribut inclus dans la balise), ou non affiché ( controls attribut non présent dans la balise)
- <script> tag: Tous les JavaScript et CSS associés associés au lecteur particulier
En parcourant cette page, vous verrez que la vidéo reflète les choix effectués en matière de taille ( fixe ), de rapport d'aspect et de dimensions .

Lire la vidéo par programme

Il existe une API riche à utiliser avec Brightcove Player. Dans cette section, vous utiliserez le play() méthode pour démarrer la lecture vidéo par programme.

Ajouter un id attribut au video balise avec une valeur de myPlayerID .
```
 <video id="myPlayerID" 
```
Juste au-dessus de la fermeture body balise, insérez une script bloquer.
```
 <script> </script>
 </body>
```
Dans le bloc de script, utilisez le on() méthode pour écouter le loadedmetadata un événement. Lorsque l'événement est distribué, une fonction de gestionnaire d'événements anonyme est appelée.
```
videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {
   
});
```
Remarque : Pour plus d'informations sur les événements de démarrage de Brightcove Player, consultez le Événements de démarrage section de la Comprendre les événements des joueurs document.
Dans la fonction, créez une variable nommée myPlayer, qui affecte l'instance du joueur, référencée sous this, à cette variable.
```
 var myPlayer = this;
```
Étant donné que la plupart des navigateurs n'autorisent plus la lecture automatique des vidéos avec une piste audio, il est préférable d'utiliser le muted() méthode pour couper le son de la vidéo et garantir la lecture automatique de la vidéo.
```
 myPlayer.muted(true);
```
Voir le Considérations relatives à la lecture automatique document pour plus d'informations sur le problème de lecture automatique.
Utilisez le lecteur play() méthode pour démarrer la vidéo.
```
 myPlayer.play();
```

Vérifiez que votre bloc de script apparaît comme suit.

 <script> 
   videojs.getPlayer('myPlayerID').on('loadedmetadata', function() { 
     var myPlayer = this;
     myPlayer.muted(true);
     myPlayer.play();
   });
 </script>

Enregistrez vos modifications et actualisez votre page dans le navigateur pour voir la vidéo démarrer automatiquement. Si vous avez choisi une vidéo avec une piste audio, vous ne l'entendrez pas, car les vidéos en lecture automatique ne lisent pas la piste audio (règles du navigateur, pas de Brightcove).

Ajouter un plugin

Brightcove Player dispose de nombreux plugins que vous pouvez utiliser pour améliorer le lecteur. Un de ces plugins est le plugin Overlay. Dans cette section, vous ajouterez ce plugin au code avancé que vous avez terminé dans la dernière section. Pour plus de détails sur le plugin, consultez le Plug-in de superposition d'affichage document.

Lorsque vous utilisez un plugin, vous devez fournir le chemin vers le JavaScript qui est l'implémentation du plugin. Vous devrez peut-être également fournir le lien vers un CSS si nécessaire par le plugin.

Juste au-dessus de la fermeture head , insérez la déclaration de lien suivante qui pointe vers l'emplacement du CSS pour le plugin de superposition.
```
 <link href="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css" rel='stylesheet'> </head>
```
Juste au-dessus du bloc de script que vous avez ajouté précédemment, ajoutez ce qui suit script balise qui est le code JavaScript réel qui implémente la fonctionnalité du plugin de superposition.
```
 <script src="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js"></script> <script>
 videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {
```
Juste après où le play() méthode est utilisée, appelez le lecteur overlay() et ajoutez des accolades en tant que paramètre pour préparer le passage d'un objet de configuration JSON.
```
 myPlayer.overlay({ });
```
Plusieurs objets de superposition peuvent être transmis sous forme de tableau au plugin pour afficher différents contenus à différents moments et à différents endroits. Dans ce cas, un seul objet de superposition sera transmis pour afficher du texte, et l'afficher uniquement lors de la lecture de la vidéo. Lorsque la vidéo est en pause, la superposition ne sera pas affichée. Vous souhaitez également que la superposition apparaisse au milieu du côté droit du lecteur. Pour implémenter cela, ajoutez l'objet de superposition suivant en tant que paramètre de configuration.
```
 overlays: [{ 
  content: 'This event-triggered overlay message appears when the video is playing', 
  start: 'play',
  end: 'pause',
  align: 'right'
}]
```

Vérifiez que votre bloc de script apparaît comme suit et que le plugin de superposition a été appelé et configuré correctement.

 <script> 
  videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {
    var myPlayer = this;
    myPlayer.muted(true);
    myPlayer.play();
    myPlayer.overlay({
      overlays: [{
        content: 'This event-triggered overlay message appears when the video is playing', 
        start: 'play',
        end: 'pause',
        align: 'right'
      }]
    });
  });
</script>

Enregistrez vos modifications et actualisez votre page dans le navigateur pour voir la vidéo démarrer automatiquement. Vous verrez la superposition apparaître au démarrage de la vidéo. Mettez la vidéo en pause pour voir la superposition supprimée.
Remarque : L'implémentation du plugin Overlay ici ne sera utilisée qu'avec le lecteur sur la page HTML spécifique. Vous pouvez ajouter un plugin pour faire partie d'un lecteur, peu importe où et combien de fois le lecteur est utilisé sans avoir à copier et coller du code à plusieurs reprises. Voir le Pas à pas: Développement de plugins pour voir une approche orientée développeur à la mise en œuvre, ou le Configuration des plugins de lecteur document pour voir la manière la plus simple d'implémenter le plug-in dans le lecteur à l'aide de Studio.

Pour votre examen, le code HTML de la page entière peut être consulté ici:

<!doctype html> 
<html>
<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <link href="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css" rel='stylesheet'> </head>
<body>
  <video-js id="myPlayerID"
    data-account="1752604059001"
    data-player="UEoNyhSA6"
    data-embed="default"
    controls=""
    data-video-id="4607357817001"
    data-playlist-id=""
    data-application-id=""
    width="960" height="540"></video>
  <script src="https://players.brightcove.net/1752604059001/UEoNyhSA6_default/index.min.js"></script> 
  
  <script src="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js"></script> 
  <script>
    videojs.getPlayer('myPlayerID').on('loadedmetadata', function() { 
      var myPlayer = this;
      myPlayer.muted(true);
      myPlayer.play();
      myPlayer.overlay({
        overlays: [{
          content: 'This event-triggered overlay message appears when the video is playing', 
          start: 'play',
          end: 'pause',
          align: 'right'
        }]
      });
    });
  </script>
</body>
</html>

 <!doctype html> <html>
 <head>
 <meta charset="UTF-8">
 <title>Untitled Document</title>
 <style>
 .video-js {
 height: 344px;
 width: 610px;
 }
 </style>
 <link href="https://players.brightcove.net/videojs-overlay/lib/videojs-overlay.css" rel='stylesheet'> </head>
 <body>
 <video id="myPlayerID"
 data-account="3676484087001"
 data-player="78ef7d78-18d9-4459-a6da-d94e46163076"
 data-embed="default"
 controls></video>
 <script src="https://players.brightcove.net/3676484087001/78ef7d78-18d9-4459-a6da-d94e46163076_default/index.min.js"></script> <script src="https://players.brightcove.net/videojs-overlay/lib/videojs-overlay.js"></script> <script>
 videojs.getPlayer('myPlayerID').on('loadedmetadata', function () { var myPlayer = this;
 myPlayer.play();
 myPlayer.overlay({
 overlays: [{
 content: 'This event-triggered overlay message appears when the video is playing', start: 'play',
 end: 'pause'
 }]
 });
 });
 </script>
 </body>
 </html>