Plugin d'écran d'extrémité personnalisé

Aperçu

Le plugin Custom Endscreen permet d'afficher le code HTML fourni par le client à la fin de la lecture vidéo.

L'exemple de vidéo ci-dessous montre l'utilisation du plug-in Custom Endscreen. À la fin de cette courte vidéo, vous verrez le texte affiché à partir du code HTML suivant:

<strong>Content</strong> for <em>custom</em> end screen

Implémenter avec le module Players

Des écrans finaux personnalisés peuvent être implémentés par modification des propriétés de l'écran final ou en utilisant le plugin personnalisé de l'écran final. Pour implémenter le plug-in d'écran personnalisé à l'aide du module Lecteurs, procédez comme suit:

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. Cliquez sur Écrans de fin dans le menu de navigation de gauche.
4. Ensuite, pour le Écran de fin du joueur tapez, cliquez sur la flèche vers le bas et sélectionnez Douane.
5. Dans la zone de texte HTML personnalisé , saisissez le code HTML à afficher sur l'écran d'extrémité. Voici un exemple :

   <div style="text-align:center">
   <p>This video sponsored by</p><br/>
   <img src="http://support.brightcove.com/site-assets/images/site/logos/BeaconLogo.svg"/>
   </div>

   L'écran final suivant s'affiche :

   

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

Implémenter à l'aide

https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.min.js

https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.css

{
  "content": "<strong>Content</strong> for <em>custom</em> end screen"
}

  <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.css">

  <video-js id="myPlayerID"
    data-account="1752604059001"
    data-player="decfdaf5-0a6e-43f6-82d3-39d125c413c4"
    data-embed="default"
    data-video-id="4077874637001"
    controls=""></video-js>

  <script src="https://players.brightcove.net/1752604059001/decfdaf5-0a6e-43f6-82d3-39d125c413c4_default/index.min.js"></script>

  <script type="text/javascript" src="https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.customEndscreen({
        "content": "<strong>Content</strong> for <em>custom</em> end screen"
      })
    });
  </script>

{
  "content": "<strong>Content</strong> for <em>custom</em> end screen"
}

  <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.css">

  <video-js id="myPlayerID"
    data-account="1752604059001"
    data-player="decfdaf5-0a6e-43f6-82d3-39d125c413c4"
    data-embed="default"
    controls=""></video-js>

  <script src="https://players.brightcove.net/1752604059001/decfdaf5-0a6e-43f6-82d3-39d125c413c4_default/index.min.js"></script>

  <script type="text/javascript" src="https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.customEndscreen({
        "content": "<strong>Content</strong> for <em>custom</em> end screen"
      })
    });
  </script>

Propriété

La propriété de plugin suivante est utilisée pour contrôler le plugin Custom Endscreen:

• content:
  • Type: string
  • Toute chaîne littérale ou HTML rendue sur l'écran final personnalisé.

Personnalisez l'écran final

Vous pouvez utiliser CSS pour personnaliser l'apparence de votre écran final. Voici quelques exemples de ce que vous pouvez faire. Assurez-vous de tester vos implémentations pour vous assurer qu'elles fonctionnent avec le contenu de votre page.

C'est ainsi que l'écran final apparaît avec le bouton de redémarrage de la vidéo et un bouton de partage social.

Changer la taille du bouton

Supposons que vous souhaitiez modifier la taille des boutons de l'écran final. Ces images de bouton sont au format SVG (Scalable Vector Graphics) afin qu'elles se chargent rapidement sur toutes les plates-formes. Pour cette raison, vous ne pouvez pas modifier leur taille en utilisant le width et height Propriétés CSS.

Au lieu de cela, comme ces boutons sont des fichiers texte XML, vous pouvez modifier leur taille en utilisant le font-size Propriété CSS.

Utilisez le code ci-dessous pour réduire les deux boutons:

.vjs-overlay-buttons {
  font-size: .5em;
}

L'utilisation d'une valeur en pourcentage devrait avoir le même effet:

.vjs-overlay-buttons {
  font-size: 50%;
}

Le résultat devrait ressembler à ceci :

Ou vous pouvez contrôler la taille de chaque bouton indépendamment:

.vjs-restart-control {
  font-size: .5em;
}
.vjs-trigger-social-control {
  font-size: .5em;
}

Déplacer le contenu sous les boutons

Plus tôt dans ce document, vous avez appris comment ajouter du contenu à l'écran final. Pour revoir, vous pouvez ajouter n'importe quel HTML au plugin. Le code ci-dessous ajoute un lien vers notre page d'accueil à l'écran final:

<a href='https://www.brightcove.com'>Visit our home page</a>

Par défaut, votre contenu ajouté s'affiche au-dessus des boutons de l'écran final:

Utilisez le CSS suivant pour positionner votre contenu HTML sous les boutons de l'écran final:

• Lignes 190-193: Positionnez les boutons par le haut. Ces éléments sont déjà centrés sur la page pour vous.
• Lignes 194-196: Supprimez le remplissage par défaut de l'ensemble de la superposition pour vous aider à centrer votre texte personnalisé.
• Lignes 197-202: Positionnez votre texte personnalisé par le bas et centrez-le horizontalement.

.vjs-overlay-buttons {
  position: absolute;
  top: 5em;
}
.vjs-custom-overlay {
  padding: 0;
}
.vjs-endscreen-overlay-content {
  position: absolute;
  bottom: 5em;
  text-align: center;
  width: 100%;
}

Le résultat devrait ressembler à ceci :

Afficher le contenu vertical et les boutons

Vous pouvez également modifier la mise en page de votre contenu HTML et les boutons de l'écran final. Par défaut, ils sont affichés horizontalement, avec votre contenu au-dessus des boutons. Le code ci-dessous fait flotter votre contenu à gauche des boutons et affiche les boutons verticalement:

• Lignes 205-210: Positionnez les boutons du haut et de la gauche. La petite largeur a entraîné l'alignement vertical des boutons.
• Lignes 211-213: Supprimez le remplissage par défaut pour toute la superposition.

• Lignes 214-223: Positionne le texte personnalisé à gauche des boutons, centré horizontalement et verticalement sur la moitié de la superposition.

.vjs-overlay-buttons {
  position: absolute;
  width: 10%;
  top: 20%;
  left: 50%;
}
.vjs-custom-overlay {
  padding: 0;
}
.vjs-endscreen-overlay-content {
  position: absolute;
  float: left;
  width: 50%;
  text-align: center;
  top: 45%;
  transform: translate(0, -50%)
  -webkit-transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
}

Le résultat devrait ressembler à ceci :

Vous pouvez être créatif avec l'apparence de votre écran final en remplaçant les propriétés CSS par défaut. Dans votre navigateur, inspectez les éléments pour trouver les noms et les valeurs des classes d'éléments. Pour un aperçu rapide de la procédure à suivre, consultez le Personnaliser l'apparence du joueur document.

Utiliser des macros

le content La chaîne fournie pour les écrans de fin personnalisés peut désormais inclure des macros (prises en charge par videojs-contrib-ads). Par exemple, si vous vouliez que l'écran final inclue le nom et la description de la vidéo actuellement dans le lecteur, vous utiliseriez un code similaire à:

videojs.getPlayer('myPlayerID').on('loadstart', function() {
  var myPlayer = this;

  // +++ Call endscreen method +++
  myPlayer.customEndscreen({
    content: '{mediainfo.name} - {mediainfo.description}'
  });
});

Cela entraînerait l'écran final suivant:

Voici la liste complète des macros disponibles:

  cust_params={mediainfo.ad_keys}

Problèmes connus

• Dans le cas très rare où vous gardez manuellement la barre de contrôle visible à tout moment ET que vous utilisez le plugin d'écran de fin personnalisé, vous devrez faire un petit changement pour que la barre de contrôle fonctionne correctement après l'affichage de l'écran de fin. Par défaut, le plugin endscreen désactive la barre de contrôle. Pour activer la barre de contrôle, puisqu'elle est toujours visible, vous devez utiliser le JavaScript player.controls(true) après le ModalDialogde modalopen l'événement est distribué.

Changelog

Voir le Notes de version du plug-in Endscreen personnalisé.

Pour les notes de version historiques, voir le changelog ici.