Création de modèles de lecteur

Product
Video Cloud
S'applique aux utilisateurs
Développeur
Version
Brightcove 5
Modules
BEML
Édition
Pro, Entreprise
Créé par Britta Schellenberg.

Le lecteur Brightcove est associé à un document XML, le modèle de lecteur. Brightcove contient plusieurs modèles de lecteur standard, tout en vous offrant la possibilité de créer des lecteurs personnalisés. Ce document décrit les principaux éléments d’un modèle de lecteur personnalisé.

Les modèles de lecteur personnalisés sont uniquement accessibles aux clients Brightcove Pro et Enterprise.Si vous souhaitez mettre à niveau votre compte Brightcove, veuillez contacter Brightcove pour plus d’informations.

Cette rubrique contient les informations suivantes :

Principaux éléments de BEML

L’XML que vous utilisez dans un modèle de lecteur personnalisé est défini dans la définition de type de document (DTD) pour BEML (Brightcove Experience Markup Language). La référence DTD BEML décrit tous les éléments XML et les attributs que vous allez utiliser dans un document BEML. Les modèles de lecteur standard peuvent s’avérer un excellent point de départ dans la réalisation de vos propres modèles. Vous pouvez télécharger le BEML pour chaque modèle de lecteur standard sous forme de fichier .zip.

Chaque élément d’un modèle de lecteur est associé à un aspect visuel ou non du lecteur. Il peut ainsi définir un élément de l’interface, comme une étiquette de texte, une bannière, un lecteur vidéo ou un élément de présentation, qui établit la disposition des éléments de l’interface les uns par rapport aux autres et l’aspect global du lecteur. Les attributs définissent les éléments du lecteur ainsi que leur emplacement (abscisse et ordonnée), leur style et l'origine des données à afficher (nom de la vidéo, emplacement de l’image, etc.). Les principaux éléments d’un modèle de lecteur sont :

BEML et XML

Etant donné que le modèle de lecteur BEML est un document XML, vous devez connaître les bases du langage XML pour pouvoir réaliser un modèle de lecteur personnalisé à l’aide de BEML. Si vous êtes novice, voici quelques éléments qui vous aideront à bien démarrer :

Le seul problème que vous risquez de rencontrer avec votre fichier XML concerne les caractères spéciaux. Dans le code XML, évitez les cinq caractères spéciaux suivants :

Caractère
Forme d’échappement
<
&lt;
>
&gt;
&
&amp;
'
&apos;
"
&quot;

Veillez par ailleurs à ne pas inclure d’espace vide supplémentaire dans les attributs du XML. Faites par exemple :

<element id="foo" />

et pas :

<element id = "foo" />

L’espace supplémentaire avant et après le signe égal dans cet exemple empêche la définition du modèle de lecteur dans le module d’édition.

Elément Labels : personnalisation et localisation du texte

Grâce à l’élément Labels du modèle de lecteur, vous pourrez personnaliser le texte de chaque étiquette de votre lecteur. Cela vous permet de créer un lecteur avec des étiquettes en plusieurs langues. Vous pourrez également personnaliser le texte en fonction du style, de l'image de marque ou à d'autres fins. Pour plus d'informations, consultez la rubrique Localisation des lecteurs.

Elément Theme : personnalisation de l’aspect

L’élément Theme d’un modèle de lecteur vous permet de personnaliser l’aspect de vos lecteurs Brightcove. Selon le niveau de personnalisation souhaité, vous pourrez utiliser les éléments Theme et Style aux fins suivantes :

Sachez que si un modèle de lecteur n’inclut pas l’élément Thème, vous ne pourrez pas utiliser le module d’édition pour modifier les styles d’un lecteur basé sur ce modèle de lecteur. Pour plus de détail, consultez la rubrique Thèmes et styles dans les modèles de lecteur.

Eléments de présentation : personnalisation de la disposition

L’élément Layout définit les éléments de l’interface inclus dans un lecteur ainsi que leur position au sein du lecteur. L’élément Layout peut contenir deux types d’éléments enfants : les zones de présentation et les composants. Les zones de présentation contiennent d’autres éléments. Il peut s’agir d’autres zones de présentation ou de composants. La zone de présentation globale définit la disposition et les dimensions des éléments qui la composent. Les composants sont les éléments de l’interface, comme VideoPlayer, Label ou Image.

En général, les zones de présentation n’offrent aucun rendu spécifique bien que vous puissiez y affecter une couleur ou une image de fond, lesquelles seront alors associées à tous les éléments enfants. Vous pouvez utiliser les zones de présentation standard suivantes :

Canvas

La zone de présentation la plus simple qui soit. Les éléments enfants d’un module Canvas sont intégrés à une zone de canvas selon l’abscisse et l’ordonnée définies pour l’élément enfant.

HBox

Zone horizontale disposant les éléments enfants horizontalement. Les éléments enfants intégrés à un élément HBox sont disposés de manière séquentielle de gauche à droite. Chaque élément le composant est placé directement à droite de l’élément enfant précédent et peut être éventuellement séparé par un espace vide.

VBox

Zone verticale disposant les éléments enfants verticalement. Les éléments enfants intégrés à un élément VBox sont disposés de manière séquentielle de haut en bas. Chaque élément le composant est placé directement sous l’élément enfant précédent et peuvent être éventuellement séparés par un espace vide.

Grid

Zone de présentation permettant une disposition plus complexe des éléments enfants par colonne et ligne.

TextRegion

L’élément TextRegion vous permet de regrouper des éléments de texte (étiquettes, liens, etc.) et de présenter le groupe comme un composant global dans le module d’édition. Vous pourrez aussi définir la couleur de fond et des bordures pour la zone.

Pour plus d’information sur l’élément Layout et les zones de présentation, consultez la rubrique Eléments de présentation dans les modèles de lecteur.

Composants : Eléments de l’interface

Les composants comprennent plusieurs classes d’objet différentes que vous pouvez inclure dans l’aspect du lecteur. Le composant peut être visuel (VideoPlayer ou Image) ou non visuel. Voici comment ces éléments s’affichent dans le lecteur :

Brightcove comprend les composants standard suivants. Ces éléments sont détaillés dans les rubriques Composants des modèles de lecteur et Référence DTD BEML :

VideoPlayer

Association d’une fenêtre de vidéo et d’un ensemble de commandes Brightcove standard, dont une bascule lecture/pause, une barre de progression, des commandes de volumes, des commandes d’agrandissement/réduction de la fenêtre et un bouton d’accès au menu.

VideoDisplay

Fenêtre vidéo sans la barre de commande standard.

ChromelessVideoPlayer

Le ChromelessVideoPlayer ressemble à l’élément VideoDisplay, sans commandes de lecteur de type « chrome ». Lorsque l’utilisateur survole la zone d’affichage de la vidéo avec la souris, les commandes s’affichent dans la partie inférieure de l’écran.

MediaControls

Zone de présentation contenant d’autres composants commandant la lecture, dont ToggleButtons et PlayheadToggleButtons.

Playhead

Barre de progression qui avance régulièrement pendant la lecture afin d’illustrer l’avancement de la vidéo. L’utilisateur peut avancer ou reculer dans la vidéo à l’aide du curseur Playhead.

VolumeControl

Barre verticale gérant le volume lors de la lecture de la vidéo.

ToggleButton

Image cliquable associée à une étiquette. Permet de basculer entre deux états. Vous pouvez définir des images différentes (icônes), des étiquettes, des infobulles et des actions sur clic en cas d’activation ou de désactivation.

Label

Composant textuel simple permettant l'intégration de tout type de texte au lecteur. Le texte peut être lié de manière dynamique à n’importe quelle autre propriété du composant, par exemple pour afficher le nom d’une vidéo active.

TitleLabel

Elément Label pouvant assurer le rendu d'un état « selectionné ». Cela peut s’avérer intéressant pour les listes dans lesquelles vous devez distinguer l’élément sélectionné.

Image

L’élément Image charge un élément visuel (.jpg, .gif or .swf) dans le lecteur.

Button

Image cliquable associée à une étiquette et pouvant diffuser des événements.

ThumbnailButton

Affiche une image. Lorsque l’utilisateur survole l’image avec le curseur, le bouton affiche une icône de lecture.

Link

Affiche un texte cliquable au sein du lecteur utilisé pour accéder à une autre adresse ou pour appeler JavaScript.

List

Liste verticale contenant des éléments définis par l’utilisateur. L’élément List contient les éléments ListItems, chacun d’entre eux peut d’ailleurs contenir d’autres éléments.

TileList

Grille contenant des éléments définis par l’utilisateur. L’élément TileList contient les éléments ListItems, chacun d’entre eux peut d’ailleurs contenir d’autres éléments.

ListItem

L’élément ListItem doit être intégré à un composant List ou TileList. Il permet de définir l’aspect de tous les éléments de la liste en question. La définition d’un élément ListItem utilise le même code BEML que l’élément Layout. Les composants subordonnés peuvent être de tout type, à l’exception des éléments VideoPlayer ou List.

Banner

L’élément Banner s’intègre aux fonctions publicitaires d’un lecteur. Lorsqu’un nœud Banner est inclus, un nouveau format est accepté et intégré à tous les appels vers le serveur publicitaire afin de l’informer qu’une bannière peut être affichée. La taille de la bannière définit le format publicitaire pris en charge. Dès lors, un format de 468x60 permet de prendre en charge les bannières publicitaires de 468x60. D’autres formats publicitaires peuvent également être définis. Vous pourrez donc définir une bannière large afin de prendre en charge plusieurs formats de bannière inférieurs. La mise à l’échelle et l’alignement de ces bannières dans la zone plus large dépendent des attributs de l’élément Banner.

ExpandingBanner

L’élément ExpandingBanner s’intègre aux fonctions publicitaires d’un lecteur. Lorsqu’un élément ExpandingBanner est inclus, deux nouveaux formats sont acceptés et intégrés à tous les appels vers le serveur publicitaire afin de l’informer qu’une bannière peut être affichée. La taille de la bannière définit le format publicitaire pris en charge. Dès lors, un format de 468x60 permet de prendre en charge les bannières et les bannières synchronisées de 468x60.

Spacer

Composant de mise en forme générant de l’espace entre les autres éléments.

TabBar

Série d’onglets disposés horizontalement sur la page. L'élément TabBar permet une sélection simple dans une collection. L’élément TabBar affiche des commandes de défilement vers la droite et vers la gauche lorsque le nombre d’onglets est supérieur à la taille du composant. Le module TabBar peut éventuellement afficher un onglet générant une liste déroulante lors du passage de la souris.

SWFLoader

Le composant SWFLoader permet le chargement d'éléments personnalisés pouvant être placés et dimensionnés au sein d’un lecteur. Le SWF chargé est associé à l’API d’exécution afin d’observer les événements et interagir avec le lecteur. Pour plus d’informations sur les composants personnalisés, consultez la rubrique Création de composants personnalisés pour le lecteur et Ajout d’un composant personnalisé à un modèle de lecteur.

Eléments Modules : composants personnalisés

Vous pouvez utiliser l’élément Modules pour charger des composants personnalisés non associés au rendu dans vos lecteurs. Le module personnalisé doit être associé à un fichier SWF et hébergé à l’extérieur de Brightcove. Pour définir un module personnalisé, ajoutez à l’élément Modules un élément Module qui lui sera subordonné et contiendra le chemin vers le SWF à charger. Par exemple :

<Modules>
  <Module file="http://myserver/customReporting.swf" />
</Modules>

L’élément Module peut aussi contenir un certain nombre de paramètres qui seront associés au SWF lors du chargement :

<Module file="http://server/file.swf">
  <param name="foo" value="bar" />
  <param name="food" value="grill" />
</Module>

Les valeurs des paramètres peuvent aussi être associées à d’autres éléments du modèle de lecteur. Par exemple, si un module doit contenir un paramètre flashvar au niveau de l’HTML ainsi que le nom de la vidéo pour chaque modification, le code BEML suivant devrait permettre de répondre à ces besoins :

<Module file="http://server/file.swf">
  <param name="customParam" value="{player.parameters.customParam}" />
  <param name="videoName" value="{videoPlayer.video.displayName}" />
</Module>

L’élément Modules peut contenir plusieurs éléments enfants Module si vous avez plus d’un SWF à charger dans le lecteur. Pour les composants personnalisés qui doivent être rendus dans le lecteur, utilisez le composant SWFLoader. Pour plus d’informations sur les composants personnalisés, consultez la rubrique Création de composants personnalisés pour le lecteur et Ajout d’un composant personnalisé à un modèle de lecteur.

À suivre...

En savoir plus sur les éléments composant un modèle de lecteur :