Plugin de superposition d'affichage

Aperçu

Vous pouvez contrôler l'affichage du message de superposition en fonction:

• Événements des joueurs - tels play que pause des événements personnalisés
• Intervalle de temps - à une heure spécifiée pendant la lecture vidéo

L'exemple de vidéo ci-dessous montre l'utilisation du plugin Overlay. Une superposition apparaîtra au démarrage ainsi que différentes périodes de temps, une commençant à cinq secondes. Démarrez et mettez la vidéo en pause pour voir la superposition réagir à ces événements.

Cette rubrique contient les sections suivantes :

• Mise en œuvre du module Players
• Implémentation à l'aide d'un code personnalisé
• Options du plugin Overlay

Implémenter avec le module Players

Pour mettre en œuvre le Recouvrir Plugin utilisant le module Players, suivez ces étapes :

1. Ouvrez le module PLAYERS et créez un nouveau lecteur ou localisez le lecteur auquel vous souhaitez ajouter le plugin.
2. Cliquez sur le lien correspondant au lecteur pour ouvrir ses propriétés.
3. Dans la navigation de gauche, cliquez sur Plugins.
4. Élargir la Ajouter un plugin menu déroulant et sélectionnez Plugin personnalisé.

   

5. Pour le nom du plugin, entrez overlay.
6. Pour le JavaScript URL, saisissez :

   https://players.brightcove.net/videojs-overlay/3/videojs-overlay.min.js

7. Pour le CSS URL, saisissez :

   https://players.brightcove.net/videojs-overlay/3/videojs-overlay.css

8. Entrez les options de configuration dans la zone de texte Options (JSON) . L'exemple ci-dessous affichera une ancre en bas du lecteur commençant à la marque 2 secondes et se terminant à la marque 6 secondes.

   {
     "overlays": [
       {
         "align": "bottom",
         "start": 2,
         "end": 6,
         "content": "<a href='http://www.brightcove.com'>Proceed to Home Page</a>"
       }
     ]
   }

9. Vérifiez que le formulaire apparaît comme suit:

   

10. Cliquez sur Save.
11. Pour publier le lecteur, cliquez sur Publier et intégrer > Publier les modifications.
12. Pour fermer la boîte de dialogue ouverte, cliquez sur Fermer.

Implémenter à l'aide

Pour implémenter le plugin à l'aide de code personnalisé, vous allez configurer les propriétés suivantes du plugin :

• scripts - JavaScript fourni pour le plugin et ne changera pas pour différentes implémentations de plugin
• stylesheets- CSS fourni pour le plugin et ne changera pas pour différentes implémentations de plugin
• plugin name- Toujours overlay
• plugin options - Contient un tableau de propriétés et de valeurs

Pour ajouter le plugin à votre code, procédez comme suit :

1. Ajoutez la feuille de style par défaut du plugin de superposition. Vous pouvez utiliser la feuille de style par défaut ou créer vos propres styles.

   <link href="https://players.brightcove.net/videojs-overlay/3/videojs-overlay.css" rel='stylesheet'>

2. Ajouter le videojs-overlay.js fichier de script pour inclure le plugin de superposition. Ce plugin s'enregistrera automatiquement lorsqu'il sera inclus dans votre page.

   <video-js id="myPlayerID"
       data-account="1752604059001"
       data-player="972ee851-3d7e-43a0-8db1-2c6fb06bad34"
       data-embed="default"
       controls="">
   </video-js>
   
   <script src="https://players.brightcove.net/1752604059001/972ee851-3d7e-43a0-8db1-2c6fb06bad34_default/index.min.js"></script>
   
   <script src="https://players.brightcove.net/videojs-overlay/3/videojs-overlay.min.js"></script>

3. Obtenez une référence au lecteur Brightcove. Dans cet exemple, nous créons une variable nommée myPlayer et nous lui attribuons une référence au lecteur.

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

   Pour afficher un message en superposition, utilisez le options propriété pour transmettre des données au plugin. Cet exemple montre comment inclure 3 messages de superposition:

   • Première superposition:
     • Ceci s'affiche lorsque le play l'événement est distribué et est masqué lorsque le pause l'événement est distribué.
   • Deuxième superposition:
     • Ceci s'affiche lorsque la lecture vidéo dépasse 5 secondes et est masqué lorsque la lecture vidéo dépasse 10 secondes.
     • Ceci est positionné dans le coin inférieur droit du lecteur.
   • Troisième superposition:
     • Ceci s'affiche lorsque la lecture vidéo dépasse 12 secondes et est masqué lorsque la lecture vidéo dépasse 17 secondes.
     • Celui-ci est positionné dans le coin inférieur gauche du lecteur.
     • Puisque cette superposition n'a pas de content option définie, elle utilise la valeur par défaut de Contenu de superposition par défaut , défini avant le overlays tableau.
    

   Si vous incluez le script de superposition dans votre code, vous pouvez définir les messages comme suit:

   <script id="pageScript" type="text/javascript">
     videojs.getPlayer('myPlayerID').ready(function() {
       var myPlayer = this;
       myPlayer.overlay({
       content: '<strong>Default overlay content</strong>',
       overlays: [{
         align: "top",
         content: 'This event-triggered overlay message appears when the video is playing',
         start: 'play',
         end: 'pause'
       }, {
         content: 'This timed overlay message appears between 5 and 10 seconds',
         start: 5,
         end: 10,
         align: 'bottom-right'
       }, {
         start: 12,
         end: 17,
         align: 'bottom-left'
       }]
     });
    });
   </script>

Options

Les options de plug-in suivantes sont utilisées pour contrôler l'objet de superposition:

• :align
  • La valeur doit être une valeur de chaîne prise en charge.
  • Cela définit où afficher la superposition. Si vous incluez la feuille de style par défaut, les valeurs suivantes sont prises en charge: top-left , top , top-right , right , bottom-right , bottom , bottom-left , left.
• :attachToControlBar
  • La valeur peut être une chaîne ou un booléen. Si la valeur est une chaîne, la valeur doit être le nom d'un composant ControlBar.

  • Si défini sur true ou une valeur de chaîne, les superpositions alignées en bas ajusteront le positionnement lorsque la barre de contrôle est réduite. Cela n'a aucun effet sur les superpositions qui ne sont pas alignées en bas, en bas à gauche ou en bas à droite. L'option est destinée à être utilisée avec la barre de contrôle par défaut et peut ne pas fonctionner pour les barres de contrôle personnalisées. Les superpositions alignées en bas seront insérées avant le composant spécifié. Sinon, les superpositions alignées en bas sont insérées avant le premier composant enfant de ControlBar. Toutes les autres superpositions sont insérées avant le composant ControlBar.

  • L'option peut définir tous les alignements éligibles en l'utilisant au niveau supérieur :

    myPlayer.overlay({
      content: 'Default overlay content',
      attachToControlBar : true,
      overlays: [{
        align: "top",
        content: 'This event-triggered overlay message appears when the video is playing',
        start: 'play',
        end: 'pause'
      }, {
        content: 'This timed overlay message appears between 5 and 10 seconds',
        start: 5,
        end: 10,
        align: 'bottom-right'
      }, {
        start: 12,
        end: 17,
        align: 'bottom-left'
      }]
    });

    Ou pour les objets superposés individuels :

    myPlayer.overlay({
      content: 'Default overlay content',
      overlays: [{
        align: "top",
        content: 'This event-triggered overlay message appears when the video is playing',
        start: 'play',
        end: 'pause'
      }, {
        content: 'This timed overlay message appears between 5 and 10 seconds',
        start: 5,
        end: 10,
        align: 'bottom-right'
      }, {
        start: 12,
        end: 17,
        align: 'bottom-left',
        attachToControlBar : true
      }]
    });

    Un paramètre de niveau supérieur peut être remplacé par l'utilisation d'une option sur des objets de superposition individuels.

  • L'impact visuel peut être vu dans ces captures d'écran:

    

    

    

• :class
  • Une classe HTML personnalisée à ajouter aux éléments de superposition. Vous définissez le style comme vous le feriez pour n'importe quel sélecteur de classe, à l'exception du fait que vous devez utiliser le .video-js sélecteur avec le sélecteur que vous choisissez (la spécificité doit être augmentée pour que le style ne soit pas remplacé):

    .video-js .customOverlay {
      color: yellow;
      background-color: red;
    }

  • L'option peut définir tous les alignements éligibles en l'utilisant au niveau supérieur :

    myPlayer.overlay({
      content: 'Default overlay content',
      class: 'customOverlay',
      overlays: [{
        align: "top",
        content: 'This event-triggered overlay message appears when the video is playing',
        start: 'play',
        end: 'pause'
      }, {
        content: 'This timed overlay message appears between 5 and 10 seconds',
        start: 5,
        end: 10,
        align: 'bottom-right'
      }]
    });

    Ou pour les objets superposés individuels :

    myPlayer.overlay({
      content: 'Default overlay content',
      overlays: [{
        class: 'customOverlay',
        align: "top",
        content: 'This event-triggered overlay message appears when the video is playing',
        start: 'play',
        end: 'pause'
      }, {
        class: 'customOverlay2',
        content: 'This timed overlay message appears between 5 and 10 seconds',
        start: 5,
        end: 10,
        align: 'bottom-right'
      }]
    });

    Un paramètre de niveau supérieur peut être remplacé par l'utilisation d'une option sur des objets de superposition individuels.

• content:
  • La valeur peut être une chaîne ou un objet DOM.
  • C'est le HTML qui sera contenu dans la superposition. Vous pouvez passer une chaîne, un élément HTML ou un Document DOM.
  • La valeur par défaut est la chaîne This overlay will show up while the video is playing.
  • Cette option peut être définie au niveau supérieur ou pour des objets de superposition individuels.
• :end
  • La valeur peut être une chaîne ou un nombre.
  • Cela définit quand masquer une superposition. Si la valeur est une chaîne, elle est interprétée comme un nom d'événement. S'il s'agit d'un nombre, la superposition sera masquée lorsque ce moment (en secondes) est atteint dans la vidéo. Si la valeur est une chaîne, elle est interprétée comme un nom d'événement Brightcove Player, comme play, pause ou ended. Une liste de tous les événements de joueur se trouve dans l' API Player.
• :overlays
  • Un tableau d'objets de superposition.
  • Un objet de superposition doit être composé d'au moins un start et end option. Autres options utilisées comme souhaité.
• :showBackground
  • La valeur est booléenne.
  • Détermine s'il faut ou non inclure le style et le remplissage d'arrière-plan autour de la superposition. Ce paramètre peut être remplacé en étant défini sur des objets de superposition individuels.
• :start
  • La valeur peut être une chaîne ou un nombre. Cela définit quand afficher une superposition.
  • S'il s'agit d'un nombre, la superposition sera affichée lorsque ce moment (en secondes) est atteint dans la vidéo.
  • Si la valeur est une chaîne, elle est interprétée comme un nom d'événement Brightcove Player, comme play, pause ou ended. Voici quelques liens utiles :
    • Événements des joueurs
    • Référence de l'API Player
  • Voici un exemple qui affiche le texte de superposition avant le début de la lecture de la vidéo:

    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.overlay({
        content: '<strong>Default overlay content</strong>',
        overlays: [{
          align: "top",
          content: 'This event-triggered overlay message appears before the video starts playing',
          start: 'loadstart',
          end: 'play'
        }]
      });
    });

Vous pouvez utiliser tout événement envoyé par le joueur, défini dans le API Player Methods / Events document, ou vous pouvez utiliser vos propres événements personnalisés.

Toutes ces propriétés sont facultatives, mais vous pouvez obtenir des résultats étranges si vous n'incluez pas au moins le start et end Propriétés.

Styliser la superposition

Deux styles peuvent vous être utiles lorsque vous travaillez avec la superposition. Ils sont détaillés ici.

Cacher l'arrière-plan

Le CSS suivant masquera l'arrière-plan :

.vjs-overlay.vjs-overlay-top.vjs-overlay-background {
  width: 100 % ;
  margin: auto;
  left: 0;
  background: none;
}

Masquer la superposition

Le CSS suivant masquera l'arrière-plan :

.hide-overlay.vjs-overlay {
  display: none;
}

Ces deux styles sont utiles dans le Exemple de lecteur Brightcove: Activer / désactiver une superposition document.

Changelog

Voir le changelog ici.