Exemple d’apparence de lecteur personnalisée

ProduitÉdition
Video CloudProfessional, Enterprise

Dans la rubrique d’introduction sur les apparences personnalisées pour les composants de lecteur, nous vous avons montré un exemple de lecteur avec des apparences personnalisées. Dans cette rubrique, nous allons voir comment le lecteur a été personnalisé. Voici une capture qui compare l’apparence de base et l’apparence personnalisée :

Avant/Après

Le lecteur « de base » utilise un modèle de lecteur similaire au modèle Ecran large avec liste horizontale. Pour arriver au lecteur « personnalisé », nous avons ajouté des apparences personnalisées aux composants suivants :

Vous pouvez télécharger un fichier zip qui comprend tous les fichiers png utilisés pour ces apparences. Vous pouvez également télécharger le modèle de lecteur BEML complet pour le lecteur personnalisé.

Eléments VideoPlayer

playerChrome

L’arrière-plan des contrôles du lecteur. Il s’affiche derrière les boutons de contrôle du lecteur :

playerChrome

Etant donné que ce chrome d’arrière-plan est plus sombre que le style lumineux utilisé dans le modèle standard, nous devons éclaircir les textes des boutons pour qu’ils soient lisibles. Pour ce faire, il faut ouvrir le lecteur dans l’éditeur de styles du module d’édition. Dans la section Buttons de VideoPlayer, nous définissons la couleur du texte et des icônes sur blanc et le texte et les icônes au passage du curseur sur aqua pour qu'ils correspondent au thème aquatique. Changeons également la couleur des éléments Time et Volume Control.

Editeur de styles

Nous avons également ajouté une image d’arrière-plan aquatique pour correspondre au thème des vidéos :

Image d’arrière-plan aquatique

Dans le modèle du lecteur, ce code BEML représente le playerChrome dans la balise Style de VideoPlayer :

<Theme name="Deluxe" style="Light">
  <Style class="VideoPlayer"><![CDATA[
.playerChrome {
    skin:http://hostname/filename-playerChrome-skin.png;
    }
...

tête de lecture et barre de progression

La tête de lecture et la barre de progression montrent la progression de la lecture de la vidéo (et, dans le cas des vidéos en téléchargement progressif, la mise en tampon). La tête de lecture permet également au spectateur de parcourir la vidéo en avant ou en arrière. Dans cet exemple, les éléments de la tête de lecture font partie du composant VideoPlayer ; dans d’autres modèles, il peut faire partie d’un composant MediaControls séparé. Changeons les couleurs des éléments de la tête de lecture pour les faire correspondre à notre thème. La tête de lecture inclut les éléments suivants :

playhead-skin

Remplaçons la tête standard par un point. Nous choisissons une couleur qui correspond au thème aquatique :

Apparence de la tête de lecture

playheadWell-unloadedSkin

L’élément unloadedSkin de playheadWell est la partie de la tête de lecture qui n’a pas été mise en mémoire tampon pour une vidéo en téléchargement progressif.

playheadWell-unloadedSkin

playheadWell-bufferedSkin

L’élément bufferedSkin de playheadWell est la partie mise en mémoire tampon de la tête de lecture dans le cas d’une vidéo en téléchargement progressif, ou l’apparence de la partie non regardée de la tête de lecture dans le cas d'une vidéo en streaming.

playheadWell-bufferedSkin

playheadWell-watchedSkin

L’élément watchedSkin de playheadWell représente la partie de la tête de lecture que le spectateur a déjà visionné. Il est situé à gauche de la tête de lecture.

playheadWell-unloadedSkin

Le code BEML présente les éléments de tête de lecture dans la balise style de VideoPlayer :

<Theme name="Deluxe" style="Light">
  <Style class="VideoPlayer"><![CDATA[
...
.playhead {
    skin:http://hostname/filename-playhead-Skin.png;
    }
.playheadWell {
    unloadedSkin:http://hostname/filename-playheadWell-unloadedSkin.png;
    bufferedSkin:http://hostname/filename-playheadWell-bufferedSkin.png;
    watchedSkin:http://hostname/filename-playheadWell-watchedSkin.png;
    }
     ]]></Style>

 Eléments TileList

Dans notre exemple, nous incluons un composant TileList qui présente les imagettes de toutes les vidéos dans la liste de lecture et les boutons qui permettent au spectateur de faire défiler la liste de gauche à droite et inversement. Le composant TileList est personnalisé avec des apparences pour les éléments suivants :

thumbnail-skin

Le thumbnail-skin apparaît derrière l’imagette de chacune des vidéos dans la liste de lecture. Cette apparence étant légèrement plus grande que la taille d’imagette standard, elle crée une bordure autour de chaque imagette. Le thumbnail-skin serait entièrement visible si une vidéo de la liste de lecture n’avait pas d’imagette attribuée.

Apparence de l’imagette

thumbnail-overlaySkin

thumbnail-overlaySkin apparaît au-dessus de toutes les imagettes de la liste. Dans notre exemple, l’icône « lecture » indique que le spectateur peut lancer une vidéo en cliquant sur l’imagette.

Apparence de la superposition de l’imagette

pagingButtons-skin

L’arrière-plan qui s’affiche derrière les icônes avant > et arrière < sur les boutons de défilement. Nous utilisons un bouton carré au lieu du bouton rond du modèle standard. Nous utilisons une couleur cohérente avec le thème de couleur que nous voulons implémenter.

Apparence des boutons de défilement

pagingButtons-backSkin

L’apparence d’arrière-plan n’apparaît que si le curseur passe sur le bouton de défilement. Nous ajoutons un arrière-plan rectangulaire sombre pour remplacer l'arrière-plan blanc ovale du modèle standard.

Le code BEML représente les éléments d’imagette et de pagingButtons dans la balise style de TileList :

<Style class="TileList"><![CDATA[
.thumbnail {
          skin:http://http://hostname/filename-thumbnail-skin.png;
          overlaySkin:http://http://hostname/filename-thumbnail-overlaySkin.png;
        }
.pagingButtons {
          skin:http://http://hostname/filename-pagingButtons-skin.png;
          backSkin:http://http://hostname/filename-pagingButtons-backSkin.png;
        }
     ]]></Style>

 

Publier un nouveau commentaire

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

Remarques