Paper Contacter le support | état du système L'état du système

Enrobage Brightcove Players dans un CMS

Cette rubrique fournit des conseils sur la fourniture d’une boîte de dialogue aux utilisateurs du système de gestion de contenu pour leur permettre d’intégrer un Brightcove Player dans une page.

Introduction

Lorsque vos utilisateurs CMS incorporent une vidéo ou une playlist player dans une page, vous voulez leur donner autant de flexibilité que possible dans la génération de Brightcove player intégrer du code afin qu'ils puissent contrôler l'apparence de Brightcove player sur la page Web, mais ne vous attendez pas à ce qu'ils soient des experts HTML ou JavaScript.

Cette rubrique fournit des instructions sur la façon de procéder. Le public de ce document est principalement des partenaires Brightcove, mais sera utile à toute personne intégrant Video Cloud ou le autonome Brightcove Player avec votre CMS.

Player comportement du dialogue d'intégration

Il devrait y avoir une boîte de dialogue permettant à l'utilisateur de contrôler la mise en forme du player sur la page Web. Cette boîte de dialogue doit permettre à l'utilisateur de définir les champs répertoriés ci-dessous. L'hypothèse est que l'utilisateur a déjà sélectionné un compte Brightcove et une vidéo ou une liste de lecture avant l'affichage de cette boîte de dialogue. Sinon, la sélection du compte Brightcove et de la vidéo ou de la liste de lecture doit avoir lieu en premier, comme décrit dans Annexe A au dessous de.

  1. Player: L'utilisateur doit pouvoir choisir un player depuis la Brightcove disponible players. S'ils intègrent une vidéo player, puis uniquement sans liste de lecture activée players devrait être disponible au choix. S'ils intègrent une liste de lecture player, puis seule la playlist est activée players devrait être disponible au choix.
  2. Autoplay: L'utilisateur doit pouvoir activer / désactiver la lecture automatique. La valeur par défaut est désactivée.
  3. Muet: L'utilisateur doit pouvoir activer / désactiver le mode muet. La valeur par défaut est désactivée.
  4. Type incorporé: L’utilisateur doit pouvoir choisir entre iFrame et le code d’incorporation Javascript.
    1. Pour une vidéo player, la valeur par défaut doit être Javascript.
    2. Pour une playlist player, la valeur par défaut doit être iFrame.
  5. Dimensionnement: L'utilisateur doit pouvoir choisir entre Responsive[1-1] ou la taille fixe[1-2].
    1. Pour une vidéo player, la valeur par défaut doit être Responsive.
    2. Pour une playlist player:
      1. Si iFrame, la valeur par défaut devrait être Responsive.
      2. Si Javascript, la valeur par défaut devrait être fixée.
  6. Aspect Ratio: L'utilisateur doit pouvoir sélectionner le format d'image[1-1].
    1. Les choix sont:
      • 16:9
      • 4:3
      • Custom
    2. La valeur par défaut devrait être 16:9.
  7. Largeur hauteur: L'utilisateur doit pouvoir entrer la largeur et la hauteur[1-1].
    1. Si le ratio d'aspect est 16:9 or 4:3, Hauteur champ doit être grisé et calculé automatiquement en fonction de Largeur et Aspect Ratio.
    2. Les valeurs par défaut doivent être 640 pour Largeur et 360 pour Hauteur lorsque le format d'image est personnalisé.

Remarques

  • [1-1] Si le CMS fournit un conteneur natif pour l'incorporation de code qui permet à l'utilisateur de spécifier Responsive vs Fixed et Width / Height, il peut être plus judicieux d'utiliser le conteneur pour le dimensionnement et que le code d'intégration Brightcove soit toujours réactif.
  • [1-2] Le code d'intégration Responsive inclus ci-dessous utilise la largeur comme largeur maximale.

Aide générale sur l'intégration Video Cloud avec votre CMS

Intégration de votre CMS avec Video Cloud

Obtenir une liste de players

Player Management API référence

Identifier la playlist players

  1. Parcourez la liste des players retourné par le Player Management API demande référencée ci-dessus.
  2. Recherchez le playlist champ:
    1. Si le champ est présent et que la valeur est true, c'est une playlist player
    2. Si la valeur est false ou le playlist n'existe pas, faites l'étape suivante.
  3. Itérer à travers le plugins liste (si présent) et chercher un registry_id champ égal à @brightcove/videojs-bc-playlist-ui; si c'est le cas, c'est une playlist player; sinon, ce n'est pas le cas. Voici un exemple de ce qui est retourné dans le playerliste s:
    "items": [
       {
          {
          "account_id": "4031511818001",
          "branches": {
            "master": { "configuration": {
              "playlist": true, "plugins": [
                  {
                    "options": {
                      "account_id": "4031511818001",
                      "branches": {
                        "master": { "configuration": {
                          "id": "NkVhrXzug",
                          "playlist": true,
                          "plugins": [], // this is a v1 playlist player ...
            {
              "account_id": "4031511818001",
              "branches": {
                "master": { "configuration": {
                  "playlist": true,
                  "plugins": [
                    {
                      "options": {
                        "playOnSelect": true
                      },
                      "registry_id": "@brightcove/videojs-bc-playlist-ui",
                      "version": "2.x" // this is a v2 playlist player
                      }
                    }
                  ] ...
    

Intégrer les paramètres et le code

Les sections ci-dessous décrivent comment générer Brightcove player incorporer du code basé sur les sélections des utilisateurs. le %XYZ% les valeurs sont substituées dans le code intégré comme décrit ci-dessous.

Paramètres communs

  • %AUTOPLAY% = lecture automatique si Autoplay activé, sinon c'est un null un magnifique
  • %MUTED% = muet si Muted activé, sinon c'est un null un magnifique
  • %ACCOUNTID% = ID de compte Brightcove sélectionné par l'utilisateur
  • %VIDEOID% = ID de vidéo sélectionné par l'utilisateur
  • %PLAYLISTID% = ID de playlist sélectionné par l'utilisateur
  • %PLAYERID% = Vidéo sélectionnée par l'utilisateur player ID ou liste de lecture player ID
  • %CMS% = Nom du CMS
  • %CMSVERSION% = Version de CMS
  • %CONNECTORVERSION% = Version du connecteur

Vidéo iFrame player enchâsser

Paramètres de dimensionnement réactif (avec taille maximale)

%MAXWIDTH% = Width . ‘px’
%MINWIDTH% = 0px
%WIDTH% = 100% %HEIGHT% = 100%
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Paramètres de dimensionnement fixe

%MINWIDTH% = Width . ‘px’
%WIDTH% = Width . ‘px’
%HEIGHT% = Height . ‘px’
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Code d'intégration Brightcove

<div style="display: block; position: relative; min-width: %MINWIDTH%; max-width: %MAXWIDTH%;">
  <div style="padding-top: %PADDINGTOP%;">
    <iframe src="//players.brightcove.net/%ACCOUNTID%/%PLAYERID%_default/index.html?videoId=%VIDEOID%
      &usage=cms:%CMS%:%CMSVERSION%:%CONNECTORVERSION%:iframe
      &%AUTOPLAY%
      &%MUTED%"
      allowfullscreen=””
      webkitallowfullscreen=””
      mozallowfullscreen=””
      style= width: %WIDTH%; height: %HEIGHT%; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
    </iframe>
  </div>
</div

Exemple d'implémentation

Mise en œuvre de l'échantillon
Mise en œuvre de l'échantillon Iframe

JavaScript (encart) player enchâsser

Paramètres de dimensionnement réactif (avec taille maximale)

%MAXWIDTH% = Width . ‘px’
%MINWIDTH% = 0px
%WIDTH% = 100% %HEIGHT% = 100%
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Paramètres de dimensionnement fixe

%MINWIDTH% = Width . ‘px’
%WIDTH% = Width . ‘px’
%HEIGHT% = Height . ‘px’
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Code d'intégration Brightcove

<div style="display: block; position: relative; min-width: %MINWIDTH%; max-width: %MAXWIDTH%;">
  <div style="padding-top: %PADDINGTOP%; ">
    <video-js data-video-id="%VIDEOID%"
      data-account="%ACCOUNTID%"
      data-player="%PLAYERID%"
      data-embed="default"
      data-usage="cms: :%CMS%:%CMSVERSION%:%CONNECTORVERSION%:javascript" class="video-js"
      controls %AUTOPLAY% %MUTED%
      style="width: %WIDTH%; height: %HEIGHT%; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
    </video-js>
    <script src="https://players.brightcove.net/%ACCOUNTID%/%PLAYERID%_default/index.min.js"></script>
  </div>
</div>

Exemple d'implémentation

Implémentation d'échantillons incorporés dans la page
Implémentation d'échantillons incorporés dans la page

Liste de lecture iFrame Player Intégrer

Paramètres de dimensionnement réactif (avec taille maximale)

%MAXWIDTH% = Width . ‘px’
%MINWIDTH% = 0px
%WIDTH% = 100% %HEIGHT% = 100%
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Paramètres de dimensionnement fixe

%MINWIDTH% = Width . ‘px’
%WIDTH% = Width . ‘px’
%HEIGHT% = Height . ‘px’
%PADDINGTOP%
  if (Aspect Ratio == “16:9”) {
    %PADDINGTOP% = 56%
  } elseif (Aspect Ratio == “4:3”) {
    %PADDINGTOP% = 75%
  } elseif {
  %PADDINGTOP% = (Height / Width * 100) . “%”
  }

Code d'intégration Brightcove

<div style="display: block; position: relative; min-width: %MINWIDTH%; max-width: %MAXWIDTH%;">
  <div style="padding-top: %PADDINGTOP%;">
    <iframe src="//players.brightcove.net/%ACCOUNTID%/%PLAYERID%_default/index.html?playlistId=%PLAYLISTID%
      &usage=cms:%CMS%:%CMSVERSION%:%CONNECTORVERSION%:iframe
      &%AUTOPLAY%
      &%MUTED%"
      allowfullscreen=””
      webkitallowfullscreen=””
      mozallowfullscreen=””
      style=" width: %WIDTH%; height: %HEIGHT%; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
    </iframe>
  </div>
</div>

Exemple d'implémentation

Implémentation d'échantillons incorporés dans la page
Implémentation d'échantillons incorporés dans la page

Liste de lecture JavaScript (encart) player enchâsser

Paramètres de dimensionnement réactif (avec taille maximale)

%MAXWIDTH% = Width . ‘px’
%MINWIDTH% = 0px
%PADDINGTOP% = na
%WIDTH% = 100%
%HEIGHT% = 65%
%THUMBNAILWIDTH% = Round((Width-NumThumbnails*4)/ NumThumbnails);
%THUMBNAILHEIGHT% = Round(%THUMBNAILWIDTH% * %HEIGHT% / %WIDTH%);

Paramètres de dimensionnement fixe

%MAXWIDTH% = Width . ‘px’
%MINWIDTH% = Width . ‘px’
%PADDINGTOP% = na
%WIDTH% = Width . ‘px’
%HEIGHT% = Height . ‘px’
%THUMBNAILWIDTH% = Round((Width-NumThumbnails*4)/ NumThumbnails);
%THUMBNAILHEIGHT% =Round(%THUMBNAILWIDTH% * %HEIGHT% / %WIDTH%);

Code d'intégration Brightcove

<style type="text/css">
  .vjs-playlist {
    background-color: #000000;
    width: %WIDTH%;
    height: calc (%THUMBNAILHEIGHT% + 16px);
    text-align: center;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    margin: 0;
    padding: 0;
  }

  .vjs-playlist-title-container {
    color: #FFFFFF;
    /*display: none;*/
    opacity: 1;
    font-size: 0.7em;
    font-family: sans-serif;
    font-weight: bold;
  }

  .vjs-playlist-now-playing-text {
    color: #FFFFFF;
    /*display: none;*/
    opacity: 1;
    font-size: 0.7em;
    font-family: sans-serif;
    font-weight: bold;
  }

  .vjs-up-next-text {
    color: #FFFFFF;
    /*display: none;*/
    opacity: 1;
    font-family: sans-serif;
    font-weight: bold;
    text-align: right;
  }

  .vjs-playlist-duration {
    color: #FFFFFF;
    /*display: none;*/
    opacity: 1;
    font-family: sans-serif;
    font-weight: bold;
  }

  .vjs-mouse.vjs-playlist {
    background-color: #000000;
  }

  li.vjs-playlist-item {
    background-color: #000000;
    height: %THUMBNAILHEIGHT%;
    width: %THUMBNAILWIDTH%;
    display: inline-block;
    border: 2px solid #000000;
    padding: 0;
    margin: 0;
    cursor: pointer;
    vertical-align: middle;
  }

  li.vjs-playlist-item:hover {
    border-color: #FFFFFF;
  }
</style>
<div style="
display: block; position: relative; width: %WIDTH%; height: ; min-width:
%MINWIDTH%; max-width: %MAXWIDTH%; ">
  <video-js data-playlist-id="%PLAYLISTID%" data-account="%ACCOUNTID%" data-player="%PLAYERID%" data-embed="default" data- usage="cms:%CMS%:%CMSVERSION%:%CONNECTORVERSION%:javascript " class="video-js" controls %AUTOPLAY% %MUTED% style="
width: %WIDTH%; height: %HEIGHT%; position: relative;
top: 0px; bottom: 0px; right: 0px; left: 0px;
“> </video-js> <script
src="https://players.brightcove.net/%ACCOUNTID%/%PLAYERID%_default/index .min.js "></script>
<ol class="vjs-playlist vjs-csspointerevents vjs-mouse "></ol> </div>

Exemple d'implémentation

Implémentation d'échantillons incorporés dans la page
Implémentation d'échantillons incorporés dans la page

Annexe A

Si aucune vidéo ou liste de lecture n'est sélectionnée avant d'ouvrir le player boîte de dialogue intégrée, la vidéo ou la liste de lecture (et le compte Brightcove si nécessaire) doivent être sélectionnables dans la boîte de dialogue. La boîte de dialogue doit présenter à l'utilisateur les champs répertoriés ci-dessous:

  1. Compte Brightcove: L'utilisateur doit pouvoir choisir un compte Brightcove s'il n'est pas déjà sélectionné.
  2. Filtre de recherche: L'utilisateur doit pouvoir entrer une chaîne de recherche pour filtrer la liste des vidéos ou des listes de lecture affichées. Si vous utilisez l'API de recherche Brightcove, la chaîne de recherche doit être codée en URI (voir l'exemple ci-dessous).
  3. Dossier: L'utilisateur doit pouvoir sélectionner un nom de dossier dans le compte Brightcove pour filtrer la liste des vidéos affichées. L'API Brightcove ne fournit pas de filtre intégré pour les dossiers, le code client devra donc récupérer toutes les vidéos, puis filtrer par dossier. (Ne s'applique pas aux listes de lecture)
  4. Limite: L'utilisateur doit pouvoir limiter le nombre de vidéos retournées, principalement pour améliorer les performances de la recherche. Lorsque vous utilisez la recherche Brightcove, la limite maximale pouvant être spécifiée est de 100. Pour renvoyer plus de 100 vidéos, un mécanisme de pagination doit être implémenté. De plus, si l'utilisateur a sélectionné un dossier à filtrer, le client doit demander toutes les vidéos du compte à l'aide du mécanisme de pagination, puis filtrer localement cette liste par dossier et renvoyer le nombre de vidéos spécifié par la limite d'utilisateur. (Ne s'applique pas aux listes de lecture)
  5. Trier par: L'utilisateur doit pouvoir sélectionner un champ de tri.
    1. Pour les vidéos, l'utilisateur doit pouvoir choisir le nom de la vidéo, la date de mise à jour, la date de création, la date de début et le nombre total de lectures. La valeur par défaut devrait être la date de mise à jour.
    2. Pour les playlists, l'utilisateur choisit le nom et la date de modification. La valeur par défaut devrait être la date de modification.
  6. Ordre de tri: L'utilisateur doit pouvoir sélectionner un ordre de tri croissant ou décroissant. La valeur par défaut devrait être décroissante.

Le dialogue doit avoir le comportement suivant:

  1. Afficher une liste de vidéos ou de listes de lecture en fonction de la sélection de l'utilisateur ci-dessus. Permettre à l'utilisateur de sélectionner une vidéo ou une liste de lecture.
  2. Lors de l'affichage d'une liste de vidéos:
    1. Seules les vidéos actives doivent être répertoriées.
    2. L'image miniature, le nom de la vidéo et l'ID doivent être affichés.
    3. Une seule vidéo peut être sélectionnée.
  3. Lors de l'affichage d'une liste de listes de lecture:
    1. Si la liste de lecture est une liste de lecture manuelle, affichez le nom de la liste de lecture, son identifiant et le nombre de vidéos dans la liste de lecture.
    2. Si la liste de lecture est une liste de lecture intelligente, affichez le nom de la liste de lecture, son ID et - à la place du nombre de vidéos.
    3. Une seule liste de lecture peut être sélectionnée.
  4. Afficher un lien cliquable qui ouvrira la vidéo ou la playlist player dans un nouvel onglet de navigateur.

Documentation Brightcove associée

Exemple d'implémentation de dialogue

Sélection de la vidéo

Boîte de dialogue de sélection de vidéo
Boîte de dialogue de sélection de vidéo

Sélection de la liste de lecture

Boîte de dialogue de sélection de liste de lecture
Boîte de dialogue de sélection de liste de lecture

Exemples d'encodage d'URI

  1. Chaîne de recherche: great+blue

    String in CMS API L'appel doit être: great%2Bblue

    Vidéos renvoyées: tout ce qui inclut les mots: great ET blue[2-1]

  2. Chaîne de recherche: great blue

    String in CMS API L'appel doit être: great%20blue

    Les vidéos renvoyées sont toutes celles qui contiennent les mots: great OR blue[2-1]

  3. Chaîne de recherche: "great blue"

    String in CMS API L'appel doit être: %22great%20blue%22

    Les vidéos renvoyées sont tout ce qui comprend la phrase complète: great blue[2-1]

Remarques

  • [2-1] Stemming s'applique dans tous les cas. Les recherches comme celles présentées ci-dessus correspondent à des vidéos intitulées Great Blues ainsi que Great Blue Heron.

Dernière mise à jour de la page le 12 juin 2020