Vidéos sur les pare-chocs

Introduction

Un bumper est généralement une vidéo très courte (10 secondes ou moins) insérée automatiquement avant toute publicité pre-roll et votre contenu. Un bumper n'est pas utilisé pour la monétisation, mais transmet des informations telles que le logo de votre entreprise ou votre image de marque. L'affiche est affichée pour la vidéo de contenu, mais lorsque le lecteur commence à jouer, l'intercalaire est affiché en premier, suivi de la vidéo de contenu. Dans l'exemple suivant, un intercalaire d'introduction de l'entreprise est présenté, suivi d'une vidéo de contenu.

L'affiche, le titre et la courte description de la vidéo de contenu s'affichent, mais lorsque la lecture est lancée, l'intercalaire est lu avant la vidéo de contenu.

Fonctionnalité

Voici quelques détails sur les vidéos Bumper :

• Les butoirs sont compatibles avec la publicité côté client (CSAI) et la publicité côté serveur (SSAI)
• Les bumpers sont diffusés avant les publicités pre-roll et votre contenu
• Le lecteur est configurable pendant la lecture de la vidéo du pare-chocs :
  • Afficher/masquer les commandes du lecteur
  • Empêcher la recherche pendant la lecture
  • Modifier la couleur de la barre de recherche pour indiquer un pare-chocs
• Les données analytiques seront suivies de la même manière que pour toute vidéo de contenu

Mise en œuvre

Il existe trois façons de mettre en place un pare-chocs vidéo :

• Utilisation d'un attribut dans le code avancé (embed)
• Utilisation d'une chaîne de requête dans le code standard (iframe)
• Ajout à la configuration JSON du lecteur

Les détails suivent.

Code avancé (embed)

Pour activer le lecteur à l'aide du code de lecteur avancé, ajoutez l'attribut data-bumper-id= "your_bumper_id" au code de votre lecteur, comme indiqué dans le code HTML suivant.

<div style="width: 960px; height: 540px;">
  <video-js data-account="1752604059001"
    data-player="Wj0445Avw"
    data-embed="default"
    controls=""
    data-video-id="5755775186001"
    data-playlist-id=""
    data-application-id=""
    width="960" height="540"
    class="vjs-fill"
    data-bumper-id="4446983094001"></video-js>
  <script src="https://players.brightcove.net/1752604059001/Wj0445Avw_default/index.min.js"></script>
</div>

Bien entendu, l'ordre des attributs en HTML n'a pas d'importance, de sorte que le data-bumper-id= "your_bumper_id" aurait pu être placé n'importe où dans la balise <video> .

Code standard (iframe)

Pour activer le lecteur à l'aide du code standard (iframe), ajoutez le paramètre de requête &bumperId=your_bumper_id à votre chaîne de requête, comme indiqué dans le code HTML suivant.

<iframe src="https://players.brightcove.net/1752604059001/
  Wj0445Avw_default/index.html?videoId=5715315990001
  &bumperId=4446983094001" allowfullscreen="" 
  allow="encrypted-media" width="960" height="540">

Configuration JSON

Vous pouvez activer la vidéo d'accompagnement sur toutes les instances d'un lecteur spécifique en modifiant la configuration de ce lecteur. Cela signifie que vous n'avez rien à ajouter au code du lecteur sur la page, comme le montrent les deux exemples ci-dessus.

Pour modifier la configuration du lecteur dans Studio, allez dans le module Players , puis cliquez sur le lecteur que vous souhaitez modifier. Dans les propriétés du lecteur, cliquez sur JSON Editor. Ajouter à la section video_cloud des informations sur la vidéo du pare-chocs, comme indiqué en surbrillance.

{
  "compatibility": true,
  "video_cloud": {
    "policy_key": "BCpkADawqM0iKt-2XVs6ZMVqw2zuJ7m2yqfET7SgonzI3dAhYFcmJDRgD3EjLhEC6hMLQBa08qAdYf0G55vTI9bcz3NuP1DojBtiGNnGHG0XRBCww9FjZAJNYoFIuO4tkaNW8-Oz9GPqE65R",
    "bumper": {
      "id": "4446983094001"
    }
   },
   "player": {
    "template": {
    "name": "single-video-template",
    "version": "6.66.2"
   }
  },
  ...

Options

Lorsque vous utilisez la configuration JSON, vous pouvez également utiliser les options suivantes :

• show_controls - Supprime les contrôles pendant la lecture du bumper si faux (vrai par défaut)
• progress_bar_color - Modifie la couleur de la barre de progression lorsqu'elle est spécifiée (indéfinie par défaut - hérite de la couleur normale de la barre de progression du lecteur)
• prevent_seeking - Empêche la recherche lorsqu'elle est spécifiée (faux par défaut)

Les options peuvent être ajoutées à la configuration JSON du lecteur :

{
  "compatibility": true,
  "video_cloud": {
    "policy_key": "BCpkADawqM0iKt-2XVs6ZMVqw2zuJ7m2yqfET7SgonzI3dAhYFcmJDRgD3EjLhEC6hMLQBa08qAdYf0G55vTI9bcz3NuP1DojBtiGNnGHG0XRBCww9FjZAJNYoFIuO4tkaNW8-Oz9GPqE65R",
    "bumper": {
      "id": "4446983094001",
      "show_controls": true,
      "progress_bar_color": "#654321",
      "prevent_seeking": true
    }
  },
  ...