Contacter le support | État du système
Contenu de la page

    Configuration d'une superposition de lecteur à l'aide de du plug-in Overlay

    Dans cette rubrique, vous apprendrez comment ajouter le plug-in de superposition à un lecteur à l'aide du module Players.

    Les Recouvrir Le plugin permet d'utiliser à la fois du texte et des images comme superpositions. Les recouvrir plugin peut également être configuré pour quand la superposition apparaît et pour combien de temps. Pour ajouter une simple superposition d'image à un lecteur, utilisez les options de style du lecteur. Voir Styliser les lectuers pour information.

    Les superpositions peuvent être de simples messages ou images qui s'affichent devant le lecteur. Dans ce lecteur, un logo Brightcove est affiché en bas à droite du lecteur au point 2 secondes jusqu'au point 6 secondes de la vidéo.

    Vous pouvez contrôler l'affichage de la superposition d'après :

    • Les événements du lecteur: faites s'afficher la superposition d'après les événements de lecteur tels que la lecture, la pause ou des événements personnalisés.
    • Intervalles temporels: faites s'afficher la superposition à un moment précis lors de la lecture de la vidéo.

    Les superpositions sont configurées à l'aide de la recouvrir brancher. Lors de la configuration du plug-in, une URL JavaScript, un fichier CSS, un nom de plug-in et des options de plug-in devront être fournis.

    Recouvrir options de plug-in

    Les options de plug-ins permettent de configurer quand la superposition s'affiche, quand elle disparaît, ce qui sera affiché, et où elle sera affichée. Les options de plug-ins suivantes (formatées en JSON) sont prises en charge :

    • start: définit quand afficher une superposition. La valeur peut être une chaîne ou un nombre. 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. Une liste de tous les événements de lectuer se trouve dans l' API Player.
    • end: définit quand masquer une superposition. La valeur peut être une chaîne ou un nombre. 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 lectuer se trouve dans l' API Player.
    • content: définit ce qui sera affiché en tant que superposition. La valeur peut être une chaîne ou un objet DOM. Vous pouvez transmettre une chaîne, un élément HTML (conversion) ou un DocumentFragment DOM.
    • align: définit où afficher la superposition. Les valeurs suivantes sont prises en charge: top-left, top, top-right, right, bottom-right, bottom, bottom-left, left.

    Les exemples d'options suivants afficheront une image du logo Brightcove commençant au point de 2 secondes de la vidéo et se terminant lorsque la vidéo passe le point de 6 secondes :

    
    {
      "overlays": [
        {
          "start": 2,
          "end": 6,
          "content": "<a href='https://www.brightcove.com' target='_blank'><img src='http://solutions.brightcove.com/bcls/assets/images/brightcove-logo.png'></a>",
          "align": "bottom-right"
        }
      ]
    }
      

    Configuration d'une superposition de lecteur

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

    1. Ouvrez le module Players et trouvez le lecteur.
    2. Cliquez sur le lien du lecteur pour ouvrir les propriétés de celui-ci.
    3. Cliquez sur Plugins dans la navigation de gauche.
    4. Cliquez sur Ajouter un plugin > personnalisé Plugin.
    5. Pour le Nom du plug-in , Entrer recouvrir.
    6. Pour l' URL JavaScript, entrez :
      //players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js
    7. Pour l' URL CSS, entrez :
      //players.brightcove.net/videojs-overlay/2/videojs-overlay.css
      	
    8. Entrer le Options (JSON). L'exemple ci-dessous affiche une image cliquable en bas du lectuer commençant par la marque de 2 secondes et se terminant par la marque de 6 secondes.
      {
      	  "overlays": [
      	    {
      	      "start": 2,
      	      "end": 6,
      	      "content": "<a href='https://www.brightcove.com' target='_blank'><img src='http://solutions.brightcove.com/bcls/assets/images/brightcove-logo.png'></a>",
      	      "align": "bottom-right"
      	    }
      	  ]
      	}
    9. Cliquez sur sauver et Publier le lectuer. Notez que cela peut prendre jusqu'à 5 minutes pour que les modifications apparaissent dans les lecteurs publiés.

    Il est possible de configurer plusieurs superpositions pour un même lecteur. Consultez la documentation des développeurs pour plus d'informations.

    Pour un exemple d'utilisation de CSS pour styliser une superposition de lecteur, consultez le Logo Recouvrir Brancher document de développeur.


    Dernière mise à jour de la page le 20 Apr 2021