Exemples de modèle de lecteur

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.

Dans cette rubrique, nous passerons en revue plusieurs exemples de modèle de lecteur et comment utiliser BEML pour personnaliser les lecteurs ou en créer de nouveaux. Les modèles de lecteur sont :

Vous pouvez télécharger le BEML pour chaque modèle de lecteur standard sous forme de fichier .zip.

Lecteur vidéo simple

Voyons d’abord l’un des modèles de lecteur Brightcove standard : le Video Player 3.0. Il s’agit d’un lecteur vidéo unique. Voici le code BEML définissant ce modèle :

<Runtime>
  <Theme name="Deluxe" style="Light" />
  <Layout width="486" height="416">
    <VBox padding="3">
      <VideoPlayer id="videoPlayer" />
    </VBox>
  </Layout>
</Runtime>

L’élément Theme est Deluxe tandis que l’élément Style est Light. L’élément Layout contient une zone de présentation unique, une Vbox qui contient un seul composant : le lecteur vidéo. Le composant VideoPlayer se compose d’une fenêtre vidéo et d’une série de commandes multimédias Brightcove. C’est tout ce dont vous avez besoin pour définir un lecteur simple.

Lecteur localisé

Voyons à présent le lecteur simple défini et la simplicité de modification des étiquettes des commandes. Imaginons que vous souhaitez que le bouton de lecture affiche « Go! » au lieu de « Play ». Vous pouvez ajouter la ligne suivante pour modifier le texte du bouton de lecture  :

<label key="controls play">Go!</label>

Ajoutez cette ligne à l’élément Labels. Votre modèle de lecteur se présentera comme suit :

<Runtime>
  <Theme name="Deluxe" style="Light" />
  <Labels>     <label key="controls play">Go!</label>   </Labels> 
  <Layout width="486" height="416">
    <VBox padding="3">
      <VideoPlayer id="videoPlayer" />
    </VBox>
  </Layout>
</Runtime>

Au lieu d’un autre bouton de lecture, imaginons à présent que vous souhaitiez que vos commandes soient affichées en français au lieu de l’anglais d’origine. Dans l’élément Labels, pointez simplement vers l’URL des fichiers correspondant au français pour chaque étiquette du lecteur :

<Runtime>
  <Theme name="Deluxe" style="Light" />
  <Labels file="http://admin.brightcove.com/bc3_examples/fr_player_labels.xml" /> 
  <Layout width="486" height="416">
    <VBox padding="3">
      <VideoPlayer id="videoPlayer" />
    </VBox>
  </Layout>
</Runtime>

Vous pouvez bien sûr facilement paramétrer les étiquettes pour le français, l’allemand, l’italien, le japonais ou l’espagnol, à l’aide de l’onglet Options de langue de la fenêtre Modifier paramètres du module d’édition. Cet exemple vous explique comment localiser un lecteur pour presque n’importe quelle langue.

Lecteur Navigation par onglets 3.0

L’exemple suivant concerne un modèle de lecteur plus complexe, le lecteur Navigation par onglets 3.0. Ce lecteur permet à l’utilisateur de parcourir plusieurs sélections grâce aux onglets affichés en haut de la liste de lecture. La liste déroulante sur la droite comprend une courte description ainsi que les vignettes propres à chaque vidéo. Les éléments suivants sont intégrés au modèle de lecteur :

  1. HBox contenant les éléments Image et TabBar. L’élément TabBar affiche les onglets de la liste de lecture : 
    <HBox height='40' vAlign='bottom' gutter='9'>
  <Image id='logo' width='300' scaleMode='scaleDown' hAlign='left' vAlign='bottom' />
  <TabBar id='playlistTabs' height='22' tabAlign='right' hideSingleTab='true' />
</HBox>
  2. HBox contenant les éléments VideoPlayer et List. Le lecteur affiche l’élément sélectionné dans la liste de lecture. La liste affiche les éléments composant la liste de lecture : 
    <HBox height='406' gutter='6'>
  <VideoPlayer id='videoPlayer' width='480' video='{videoList.selectedItem}' />
  <List id='videoList' rowHeight='78' automaticAdvance='true'
           data='{playlistTabs.selectedItem.videoDTOs}'
           selectOnClick='true' itemInsetV='4' itemLeading='2'>
    <ListItem boxType='hbox'>
          ...
    </ListItem>
  </List>
</HBox>
  3. Chaque élément ListItem contient deux éléments VBox : le premier affiche un élément ThumbnailButton contenant la vignette d’une vidéo de la liste de lecture tandis que l’autre affiche le nom et la description de la vidéo : 
    <List id='videoList' rowHeight='78' automaticAdvance='true'
           data='{playlistTabs.selectedItem.videoDTOs}'
           selectOnClick='true' itemInsetV='4' itemLeading='2'>
  <ListItem boxType='hbox'>
      <Spacer width='8' />
      <VBox width='80' height='74' vAlign='middle'>
          <ThumbnailButton height='60' data='{currentItem}' source='{currentItem.thumbnailURL}' />
      </VBox>
      <Spacer width='7' />
      <VBox>
        <Spacer height='3' />
        <TitleLabel height='18' text='{currentItem.displayName}' truncate='true' />
        <Label multiline='true' text='{currentItem.shortDescription}' truncate='true' />
      </VBox>
      <Spacer width='3' />
    </ListItem>
  </ListItem>
</List>
  4. Le dernier élément de la présentation est l'élément VBox contenant deux composants HBox. La première HBox affiche un élément TitleLabel contenant le nom de la vidéo affichée dans le lecteur et un lien vers l’URL affectée à la vidéo : 
    <VBox gutter='15'>
  <HBox height='32'>
    <Spacer width='6' />
    <VBox>
      <TitleLabel height='24' width='765' text='{videoPlayer.video.displayName}' 
        selected='true' size='18' truncate='true' />
      <Canvas>
        <Link x='1' y='-5' size='10' text='{videoPlayer.video.linkText}' 
                 vAlign='bottom' url='{videoPlayer.video.linkURL}' />
      </Canvas>
    </VBox>
  </HBox>
  ...
</VBox>
  5. La deuxième HBox affiche les éléments Image et ExpandingBanner. Dans ce modèle, ni l’élément Image ni l’élément ExpandingBanner ne sont associés pour l’instant à un quelconque contenu : 
    <VBox gutter='15'>
    ...
  <HBox width='757' hAlign='right'>
    <Canvas width='728'>
      <Image id='bottomImage' width='728' height='90' scaleMode='scaleDown' />
      <ExpandingBanner id='banner' expandedHeight='405' 
                          width='728' height='90' expandedWidth='299' buttonWidth='90'
                          expandedOffsetY='-52' expandedOffsetX='458'
                          disableOnExpand='playlistTabs,videoList' />
    </Canvas>
  </HBox>
</VBox>

Voici le modèle de lecteur complet pour le lecteur Navigation par onglets 3.0 :

 
<Runtime>
 
  <Theme name='Deluxe' style='Light'>
    <Style id='default'>
      <![CDATA[.titleText {size: 12;}.bodyText {size: 10;}.linkText {size: 10;}]]>
    </Style>
  </Theme>
  
  <Layout id='application' width='798' height='603' boxType='vbox' padding='6' gutter='4'>
    <HBox height='40' vAlign='bottom' gutter='9'>
      <Image id='logo' width='300' scaleMode='scaleDown' hAlign='left' vAlign='bottom' />
      <TabBar id='playlistTabs' height='22' tabAlign='right' hideSingleTab='true' />
    </HBox>
 
    <HBox height='406' gutter='6'>
      <VideoPlayer id='videoPlayer' width='480' video='{videoList.selectedItem}' />
      <List id='videoList' rowHeight='78' automaticAdvance='true'
               data='{playlistTabs.selectedItem.videoDTOs}'
               selectOnClick='true' itemInsetV='4' itemLeading='2'>
        <ListItem boxType='hbox'>
          <Spacer width='8' />
          <VBox width='80' height='74' vAlign='middle'>
            <ThumbnailButton height='60' data='{currentItem}' source='{currentItem.thumbnailURL}' />
          </VBox>
          <Spacer width='7' />
          <VBox>
            <Spacer height='3' />
            <TitleLabel height='18' text='{currentItem.displayName}' truncate='true' />
            <Label multiline='true' text='{currentItem.shortDescription}' truncate='true' />
          </VBox>
          <Spacer width='3' />
        </ListItem>
      </List>
  </HBox>
  <VBox gutter='15'>
    <HBox height='32'>
      <Spacer width='6' />
      <VBox>
        <TitleLabel height='24' width='765' text='{videoPlayer.video.displayName}'
           selected='true' size='18' truncate='true' />
        <Canvas>
          <Link x='1' y='-5' size='10' text='{videoPlayer.video.linkText}' 
                   vAlign='bottom' url='{videoPlayer.video.linkURL}' />
        </Canvas>
      </VBox>
    </HBox>
    <HBox width='757' hAlign='right'>
      <Canvas width='728'>
        <Image id='bottomImage' width='728' height='90' scaleMode='scaleDown' />
        <ExpandingBanner id='banner' expandedHeight='405' 
                            width='728' height='90' expandedWidth='299' buttonWidth='90'
                            expandedOffsetY='-52' expandedOffsetX='458'
                            disableOnExpand='playlistTabs,videoList' />
      </Canvas>
    </HBox>
  </VBox>
  </Layout>
</Runtime>

Publier un nouveau commentaire

Le contenu de ce champ reste anonyme et ne sera pas affiché à autrui.
0

Remarques