Cette rubrique explique comment configurer le style du lecteur dans AliPlayer.
Configurer le style d'un lecteur HTML5
Référencez le fichier CSS qui définit la mise en page par défaut.
<link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/{SDK version}/skins/default/aliplayer-min.css" />Le fichier CSS contient les éléments graphiques du style : http://gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.png.
Configurez tous les composants internes. Le tableau suivant décrit les composants configurables.
|
Composant |
Description |
|
prism-player |
Configuration du lecteur |
|
prism-big-play-btn |
Bouton de lecture principal |
|
prism-play-btn |
Bouton de lecture |
|
prism-play-btn.playing |
Bouton de pause utilisé pendant la lecture |
|
prism-live-display |
Bouton de diffusion en direct qui remplace le bouton de lecture pendant le streaming en direct |
|
prism-fullscreen-btn |
Bouton plein écran |
|
prism-fullscreen-btn.fullscreen |
Bouton plein écran après activation |
|
prism-volume |
Bouton de volume |
|
prism-volume.mute |
Bouton de volume lorsque le mode muet est activé |
|
prism-cover |
Configuration de la vignette avant la lecture |
|
prism-controlbar |
Barre de contrôle du lecteur |
|
prism-time-display |
Durée totale |
|
prism-time-display .current-time |
Temps actuel |
|
prism-progress |
Barre de progression |
|
prism-progress-loaded |
Progression du chargement |
|
prism-progress-cursor |
Position sur la barre de progression |
|
prism-speed-selector |
Configuration de la vitesse de lecture |
|
prism-stream-selector |
Changement de résolution |
|
prism-snapshot-btn |
Bouton de capture d'écran |
|
prism-ErrorMessage |
Message d'erreur |
|
prism-info-display |
Informations supplémentaires relatives à une erreur |
Méthode de configuration
Pour plus d’informations, consultez le fichier CSS du lecteur : aliplayer-min.css.
L'exemple de code suivant montre comment configurer un bouton de lecture principal :
.prism-player .prism-big-play-btn {
width: 90px;
height: 90px;
background: url("//gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.png") no-repeat -2px -2px;
}|
Paramètre |
Description |
|
width |
Largeur du bouton de lecture principal. Unité : pixel. |
|
height |
Hauteur du bouton de lecture principal. Unité : pixel. |
|
background |
URL de l'image du bouton de lecture principal. |
|
no-repeat |
Indique que l'image ne doit pas être répétée. Le CSS prend également en charge le paramètre no-repeat. |
|
-2px |
Coordonnées x et y du bouton de lecture principal. |