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

    Intégrer des joueurs Brightcove dans un CMS

    Cette rubrique fournit des conseils sur la fourniture d'une boîte de dialogue aux utilisateurs de CMS afin de leur permettre d'intégrer un lecteur Brightcove dans une page.

    Introduction

    Lorsque vos utilisateurs CMS intègrent une vidéo ou un lecteur de playlist dans une page, vous voulez leur donner la plus de flexibilité possible dans la génération du code intégré du lecteur Brightcove afin qu'ils puissent contrôler l'apparence du lecteur Brightcove sur la page Web, sans s'attendre à ce qu'ils soient des experts HTML ou JavaScript.

    Cette rubrique fournit des directives sur la façon de procéder. Le public de ce document est principalement des partenaires Brightcove, mais sera utile à tous ceux qui intègrent Video Cloud ou le Brightcove Player autonome à votre CMS.

    Comportement du dialogue d'intégration du lecteur

    Il devrait y avoir une boîte de dialogue permettant à l'utilisateur de contrôler le formatage du lecteur 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 playlist 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 devrait se faire en premier, comme décrit à l'annexe A ci-dessous.

    1. Joueur: L'utilisateur devrait pouvoir choisir un joueur parmi les joueurs Brightcove disponibles. S'ils incorporent un lecteur vidéo, seuls les lecteurs qui ne sont pas compatibles avec la liste de lecture doivent être disponibles. S'ils incorporent un lecteur de liste de lecture, seuls les joueurs activés sur la liste de lecture doivent être disponibles au choix.
    2. Lecture automatique: 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 d'intégration: L'utilisateur devrait pouvoir choisir entre le code d'intégration iFrame et Javascript.
      1. Pour un lecteur vidéo, la valeur par défaut doit être Javascript.
      2. Pour un lecteur de liste de lecture, la valeur par défaut doit être iFrame.
    5. Dimensionnement: L'utilisateur doit pouvoir choisir entre la taille réactive[1-1] ou le dimensionnement fixe[1-2].
      1. Pour un lecteur vidéo, la valeur par défaut doit être Responsive.
      2. Pour un lecteur de liste de lecture :
        1. Si iFrame, la valeur par défaut doit être Responsive.
        2. Si Javascript, la valeur par défaut doit être fixe.
    6. Ratio d'aspect: L'utilisateur doit pouvoir sélectionner le rapport d'aspect[1-1].
      1. Les options disponibles sont les suivantes :
        • 16:9
        • 4:3
        • Custom
      2. La valeur par défaut doit être 16:9.
    7. Largeur, hauteur:L'utilisateurdoit être en mesure d'entrer Largeur et Hauteur [1-1].
      1. Si le rapport d'aspect est 16:9 ou 4:3 , le champ Hauteur doit être grisé et calculé automatiquement en fonction de la largeur et du rapport d'aspect.
      2. Les valeurs par défaut doivent être 640 pour Width et 360 Height lorsque le rapport d'aspect 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 Largeur/Height, il peut être plus logique d'utiliser le conteneur pour le dimensionnement et de faire en sorte que le code intégré 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 de Video Cloud à votre CMS

    Intégration de votre CMS avec Video Cloud

    Obtenir une liste de joueurs

    Référence de l'API de gestion du lecteur

    Identifying playlist players

    1. Parcourez la liste des joueurs renvoyés par la requête API Player Management référencée ci-dessus.
    2. Recherchez le playlist champ :
      1. Si le champ est présent et que la valeur est true, il s'agit d'un lecteur de liste
      2. Si la valeur est false ou playlist n'existe pas, effectuez l'étape suivante.
    3. Parcourez la plugins liste (si elle est présente) et recherchez un registry_id champ égal à @brightcove/videojs-bc-playlist-ui ; s'il est présent, il s'agit d'un lecteur de liste ; sinon, ce n'est pas le cas. Voici un exemple de ce qui est retourné dans la liste des joueurs :
      "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 le code d'intégration du lecteur Brightcove basé sur les sélections des utilisateurs. Les %XYZ% valeurs sont substituées dans le code d'intégration comme décrit ci-dessous.

    Paramètres communs

    • %AUTOPLAY% = lecture automatique si elle est Autoplay activée, sinon c'est une null chaîne
    • %MUTED% = muted si Muted activé, sinon c'est une null chaîne
    • %ACCOUNTID% = ID de compte Brightcove sélectionné par l'utilisateur
    • %VIDEOID% = ID vidéo sélectionné par l'utilisateur
    • %PLAYLISTID% = ID de playlist sélectionné par l'utilisateur
    • %PLAYERID% = ID de lecteur vidéo sélectionné par l'utilisateur ou ID de lecteur de playlist
    • %CMS% = Nom du CMS
    • %CMSVERSION% = Version du CMS
    • %CONNECTORVERSION% = Version du connecteur

    Lecteur vidéo iFrame intégré

    Paramètres pour le 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 pour le 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'application

    Exemple de mise en
    Iframe exemple d'implémentation

    Incorporer le lecteur JavaScript (dans la page)

    Paramètres pour le 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 pour le 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'application

    Exemple d'implémentation des exemples d'intégration en page
    Exemple d'implémentation des exemples d'intégration en page

    iFrame Playlist Player Intégrer

    Paramètres pour le 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 pour le 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'application

    Exemple d'implémentation des exemples d'intégration en page
    Exemple d'implémentation des exemples d'intégration en page

    Incorporer le lecteur de lecture JavaScript (dans la page)

    Paramètres pour le 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 pour le 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'application

    Exemple d'implémentation des exemples d'intégration en page
    Exemple d'implémentation des exemples d'intégration en page

    Annexe A

    Si aucune vidéo ou playlist n'est sélectionnée avant d'ouvrir la boîte de dialogue d'intégration du lecteur, 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 énuméré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 encodée URI (voir 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, de sorte que le code client devra récupérer toutes les vidéos, puis filtrer par dossier. (Ne s'applique pas aux playlists)
    4. Limite : L'utilisateur devrait être en mesure de limiter le nombre de vidéos renvoyé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é. En outre, 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 utilisateur. (Ne s'applique pas aux playlists)
    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 total des lectures. La valeur par défaut doit être la date de mise à jour.
      2. Pour les playlists, l'utilisateur choisit soit le nom et la date de modification. La valeur par défaut doit être la date de modification.
    6. Ordre de tri : L'utilisateur doit pouvoir sélectionner l'ordre de tri croissant ou décroissant. La valeur par défaut doit être décroissant.

    La boîte de dialogue doit avoir le comportement suivant :

    1. Affichez une liste de vidéos ou de playlists en fonction de la sélection de l'utilisateur ci-dessus. Autoriser l'utilisateur à 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 playlists :
      1. Si la liste de lecture est une liste de lecture manuelle, affichez le nom, l'ID et le nombre de vidéos de la liste de lecture.
      2. Si la liste de lecture est une liste de lecture intelligente, affichez le nom, l'ID et - à la place du nombre de vidéos.
      3. Une seule liste de lecture peut être sélectionnée.
    4. Affichez un lien cliquable qui ouvrira la vidéo ou le lecteur de liste de lecture dans un nouvel onglet de navigateur.

    Documentation liée à Brightcove

    Exemples d'implémentations de dialogue

    Sélection vidéo

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

    Sélection de playlist

    Boîte de dialogue Sélection
    Boîte de dialogue Sélection

    Exemples d'encodage URI

    1. Chaîne de recherche : great+blue

      La chaîne dans CMS API l'appel doit être : great%2Bblue

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

    2. Chaîne de recherche : great blue

      La chaîne dans CMS API l'appel doit être : great%20blue

      Les vidéos renvoyées sont toutes les suivantes : great OU blue[2-1]

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

      La chaîne dans CMS API l'appel doit être : %22great%20blue%22

      Les vidéos retournées sont toutes celles qui incluent la phrase complète : great blue[2-1]

    Remarques

    • [ 2-1] L' endiguer s'applique dans tous les cas. Les recherches comme celles montrées ci-dessus correspondent aux vidéos intitulées Great Blues ainsi que Great Blue Heron.