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

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

le Overlay Le plugin permet à la fois au texte et aux images d'être utilisés comme superpositions. le overlay Le plugin peut également être configuré pour le moment où 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 joueurs 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 du overlay 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.

Overlay options du plugin

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 joueur 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 joueur 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 alt='Brightcove Logo' src='http://solutions.brightcove.com/bcls/assets/images/brightcove-logo.png'></a>",
      "align": "bottom-right"
    }
  ]
}

Notez que dans le contenu, vous pouvez inclure toutes les balises HTML appropriées et leurs attributs (notez, par exemple, le alt texte fourni pour l'image dans l'exemple ci-dessus).

Configuration d'une superposition de lecteur

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

Ouvrez le module " Players" et localisez le lecteur.
Cliquez sur le lien du lecteur pour ouvrir les propriétés de celui-ci.
Cliquez sur Plugins dans la navigation de gauche.
Cliquez sur Add a Plugin > Custom Plugin.
Pour le Nom du plugin , entrer overlay.

Pour l' URL JavaScript, entrez :

//players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js

Pour l' URL CSS, entrez :

//players.brightcove.net/videojs-overlay/2/videojs-overlay.css

Entrer le Options (JSON). L'exemple ci-dessous affiche une image cliquable en bas du joueur 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"
      }
    ]
  }

Cliquez sur sauver et Publier le joueur. 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 obtenir un exemple d'utilisation du CSS pour styliser une superposition de lecteur, consultez le Logo Overlay Brancher document du développeur.