Vous pouvez personnaliser le cadre du lecteur multimédia en créant et en appliquant vos propres skins.
Une peau est constituée d'un emballage. Zip fichier contenant un. Css fichier et un sprite. Png fichier image contenant les graphiques de composants. . Le css fichier définit les paramètres pour les composants de la peau: barre de contrôle, affichage, dock, et playlist. Utilisez votre éditeur d'images favori pour concevoir et enregistrer les éléments visuels qui composent la peau et les liens vers ces. De la peau css fichier.
|
|
skins basés sur Flash personnalisés utilisés dans Lectora Online3.0 et plus ne fonctionnera plus. Utilisez l'une des peaux disponibles dansLectora Online ou de convertir, de reconstruire ou créer votre skin personnalisé souhaité. |
Le programme utilise le format du JW Player 5, le premier lecteur multimédia sur l'Internet aujourd'hui la peau personnalisé. Le joueur est facile à configurer, personnaliser et étendre. Pour plus de détails sur la création de skins pour le JW Player 5, visitez http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/14/building-skins .
Pour créer un habillage personnalisé en utilisant le nouveau format:
Créer une image - objet. Png fichier image contenant toutes les images pour la peau. Nommez le sprite. Png fichier le même que le nom de votre peau personnalisé image. Plusieurs créateurs d'images sprite sont disponibles sur le Web. Comportant des boutons qui sont de la même largeur et la hauteur est recommandée. En outre, les images doivent être à la même hauteur que vous voulez pour la hauteur du contrôleur.
|
|
Images Sprite ne doivent pas dépasser une hauteur de 24px. Contactez support si vous avez besoin de plus grandes images sprite supérieures à 24px. |
Notez la position X et Y de chacune des images dans le fichier image de sprite. Ces coordonnées sont nécessaires lorsque vous créez le. Css fichier à l' étape 3.
Par exemple, voici les positions et les dimensions X et Y pour l'image par exemple de sprite indiqué à l'étape 1:
| Skin Image | Position X, Y | Largeur | la taille |
| Image de fond | 0, 0 | 80 | 24 |
| bouton Play | 0, 24 | 20 | 24 |
| Jouer bouton sensitif | 20, 24 | 20 | 24 |
| bouton Pause | 40, 24 | 20 | 24 |
| bouton sensitif Pause | 60, 24 | 20 | 24 |
| bouton fullscreen | 0, 48 | 20 | 24 |
| bouton sensitif Fullscreen | 20, 48 | 20 | 24 |
| bouton Unfullscreen | 40, 48 | 20 | 24 |
| bouton sensitif Unfullscreen | 60, 48 | 20 | 24 |
| Bouton de sourdine | 0, 72 | 20 | 24 |
| bouton sensitif Mute | 20, 72 | 20 | 24 |
| bouton Réactiver | 40, 72 | 20 | 24 |
| bouton sensitif Unmute | 60, 72 | 20 | 24 |
| bouton Captions | 0, 96 | 24 | 24 |
| TimeHandle | 24, 96 | 6 | 16 |
Créez le. Css fichier pour la peau, guidée par le fichier CSS de l' échantillon fourni ci - dessous. Nommez le. Css fichier le même que la peau est nommé dans le fichier.
Selon le nom de votre peau, de remplacer en sampleconséquence.
Par exemple
, sampleest destinée à être remplacée par. YourSkinName
et sample.pngest destinée à être remplacée par yourSkinName.png .
Exemple :
div [id ^ = "vidéo"] .sample .mejs-commandes {
background: url (Sprites / sample.png) 0px 0px;
hauteur: 24px;
bas: -24px;
}Votre peau :
div [id ^ = "vidéo"]-contrôles .mejs .yourSkinName {
background: url (Sprites / yourSkinName.png) 0px 0px;
hauteur: 24px;
bas: -24px;
}
Chacune des images qui composent la peau exige sa classe CSS respective. Pour l'arrière - plan, utilisez Mejs-commandes qui doivent pointer sur l'image d'arrière - plan dans le sprite. cela se fait avec le fond url(Sprites/sample.png) 0px 0px
où 0px 0pxreprésente la position X et Y dans l'image de sprite. Utilisez les classes pour l'audio et la vidéo en conséquence , comme indiqué dans l'échantillon. Css ci - dessous.
Modifier la hauteur en conséquence à votre image. Si vous souhaitez que la barre de contrôle pour être en dessous de la vidéo, modifiez la propriété en bas en conséquence.
Remplacer les autres commandes avec leur image et leur taille respective.
Par exemple:
.mejs-Commandes .sample bouton .mejs pause {
largeur: 20px;
hauteur: 24px;
background: url (Sprites / sample.png) no-repeat -40px -24px;
margin: 0;
padding: 0;
}
Notez que la position x et y sont négatifs pour montrer la position décalée CSS appropriée.
Pour le rail de temps et curseur de volume, changer la couleur de fond à votre goût. Utilisez des valeurs RGBA pour afficher avec une transparence alpha, et d'utiliser une valeur hexadécimale et pour soutenir les anciens navigateurs.
Une fois les fichiers d'image .css et sprites sont complets, zip ensemble. Le. Zip nom doit correspondre à votre. Css nom de fichier.
Exemple Fichier CSS
/ * Assurez-vous que cela correspond au nom de votre fichier .css. Par exemple, si votre fichier .css est appelé sample.css, assurez-vous que cette classe est appelée .mejs-container.sample * /
.mejs-container.sample {
}
/ * Ceci est le conteneur pour tous les éléments de commande. * /
.mejs-des contrôles .sample {
position: absolute;
bottom: 0;
largeur: 100%;
}
/ * Ces 2 blocs d'identification définissent l'image d'arrière-plan pour le contrôleur audio / vidéo pour Lectora. * /
div [id ^ = "vidéo"] .sample .mejs-commandes {
background: url (Sprites / sample.png) 0px 0px;
hauteur: 24px;
bas: -24px;
}
div [id ^ = "audio"] .sample .mejs-commandes {
background: url (Sprites / sample.png) 0px 0px;
hauteur: 24px;
bottom: 0;
}
/ * Ces 2 blocs d'identification définissent l'image d'arrière-plan pour le contrôleur audio / vidéo pour Lectora en ligne. * /
div [id ^ = "vid"] .sample .mejs-commandes {
background: url (Sprites / sample.png) 0px 0px;
hauteur: 24px;
bas: -24px;
}
div [id ^ = "sndtobj"] .sample .mejs-commandes {
background: url (Sprites / sample.png) 0px 0px;
hauteur: 24px;
bottom: 0;
}
/ * Ceci définit la position et la taille du temps-curseur de gauche et en haut. Le temps-curseur est la barre qui indique la progression du fichier multimédia. * /
.mejs-temps curseur .sample {
gauche: 20px;
top: 4px;
hauteur: 8px;
display: inline-block;
}
/ * Permet de régler la position de la glissière de temps par rapport à la largeur du contrôleur. * /
.mejs-temps de .sample {
top: 0px;
gauche: 0px;
position: relative;
}
/ * Ceci est le conteneur de code temporel. * /
.sample .mejs-contrôles .mejs-temps {
background: url (Sprites / sample.png) repeat-x 0 0;
hauteur: 17px;
position: relative;
top: 0px;
}
/ * Ceci est la barre de progression des médias. * /
.sample .mejs-commandes .mejs-time-rail {
background: url (Sprites / sample.png) repeat-x 0 0;
hauteur: 22px;
}
/ * Ceci définit la couleur, ou la couleur et alpha en fonction du navigateur, et la hauteur de la barre de temps curseur totale. * /
Temps-rail de .mejs-temps totale .sample .mejs-commandes {
background: # 383838;
fond: rgba (0,0,0,0.6);
hauteur: 8px;
}
/ * Ceci définit la hauteur de la barre tampon temps curseur. * /
.sample .mejs-commandes .mejs-time-rail .mejs temps-tampon {
hauteur: 8px;
}
/ * Ceci définit la couleur, ou la couleur et alpha en fonction du navigateur, et la hauteur de la barre de temps curseur chargé. * /
Les .mejs chargé en temps-temps-rail de .sample .mejs-commandes {
background: # 808080;
fond: rgba (128,128,128,0.3);
largeur: 0;
hauteur: 8px;
}
/ * Ceci définit la couleur, ou la couleur et alpha en fonction du navigateur, et la hauteur de la barre de temps curseur en cours. * /
.sample .mejs-commandes .mejs-time-rail .mejs-temps-courant {
background: # 335D7C;
fond: rgba (51,93,124,0.8);
largeur: 0;
hauteur: 8px;
}
/ * Ceci définit l'aspect et la position de la poignée de temps du temps curseur. * /
.sample .mejs-commandes .mejs-time-rail .mejs-time-handle {
bloc de visualisation;
border: none;
margin: 0;
largeur: 6px;
gauche: -3px;
hauteur: 16px;
top: -5px;
background: url (Sprites / sample.png) no-repeat -24px -96px;
}
/ * Ceci décrirait le temps flottant, mais cette peau ne pas utiliser un. * /
.sample .mejs-commandes .mejs-time-rail .mejs-time-float {
display: none;
}
/ * Ceci définit la taille et la position des boutons lecture / pause. * /
.sample .mejs-commandes .mejs-playpause bouton {
top: 0px;
gauche: 0px;
largeur: 20px;
hauteur: 24px;
}
/ * Ceci définit la balise bouton de lecture. * /
.mejs-Commandes .sample .mejs-playpause-bouton {
largeur: 20px;
hauteur: 24px;
background: url (Sprites / sample.png) no-repeat 0 -24px;
margin: 0;
padding: 0;
}
/ * Ceci définit la balise bouton pause. * /
.mejs-Commandes .sample bouton .mejs pause {
largeur: 20px;
hauteur: 24px;
background: url (Sprites / sample.png) no-repeat -40px -24px;
margin: 0;
padding: 0;
}
/ * Ceci définit l'état stationnaire de bouton de lecture * /
-Playpause-bouton bouton .sample .mejs-commandes: hover {
background: url (Sprites / sample.png) no-repeat -20px -24px;
}
/ * Ceci définit l'état stationnaire de bouton pause * /
bouton-pause de .sample .mejs-commandes: hover {
background: url (Sprites / sample.png) no-repeat -60px -24px;
}
/ * Ceci définit la taille et la position des fullscreen / boutons unfullscreen. * /
.sample .mejs-contrôles-fullscreen bouton {
top: 0px;
droite: 12px;
largeur: 20px;
hauteur: 44px;
background: none;
}
/ * Ceci définit le bouton fullscreen. * /
-Fullscreen-bouton bouton .sample .mejs-commandes {
largeur: 20px;
hauteur: 24px;
background: url transparent (Sprites / sample.png) no-repeat 0 -48px;
margin: 0;
padding: 0;
}
/ * Ceci définit le bouton tag unfullscreen. * /
.sample bouton .mejs-commandes .mejs-unfullscreen {
background: url transparent (Sprites / sample.png) no-repeat -40px -48px;
margin: 0;
padding: 0;
}
/ * Ceci définit l'état bouton sensitif fullscreen. * /
-Fullscreen-bouton bouton .sample .mejs-commandes: hover {
background: url transparent (Sprites / sample.png) no-repeat -20px -48px;
}
/ * Ceci définit l'état bouton sensitif unfullscreen. * /
-Unfullscreen de bouton .sample .mejs-commandes: hover {
background: url transparent (Sprites / sample.png) no-repeat -60px -48px;
}
/ * Ceci définit la taille et la position des touches activer / désactiver. * /
.sample .mejs-commandes .mejs-volume-bouton {
top: 0px;
droite: 0px;
largeur: 20px;
hauteur: 24px;
}
/ * Ceci définit le bouton tag muet. * /
.sample bouton .mejs-commandes .mejs-muet {
background: url (Sprites / sample.png) no-repeat 0 -72px;
largeur: 20px;
hauteur: 24px;
margin: 0;
padding: 0;
}
/ * Ceci définit le bouton tag unmute. * /
.sample bouton .mejs-commandes .mejs-unmute {
background: url (Sprites / sample.png) no-repeat -40px -72px;
largeur: 20px;
hauteur: 24px;
margin: 0;
padding: 0;
}
/ * Ceci définit l'état bouton sensitif muet. * /
-Muet de bouton .sample .mejs-commandes: hover {
background: url (Sprites / sample.png) no-repeat -20px -72px;
}
/ * Ceci définit l'état bouton sensitif unmute. * /
-Unmute de bouton .sample .mejs-commandes: hover {
background: url (Sprites / sample.png) no-repeat -60px -72px;
}
/ * Ces propriétés définissent l'apparence et la taille de l'arrière-plan externe de la pop-up vertical curseur de volume. * /
.sample .mejs-commandes .mejs-volume-bouton .mejs-volume-curseur {
background: # C0C1E0;
border: 1px solid #FFFFFF;
border-width: 1px 1px 0 1px;
largeur: 20px;
hauteur: 65px;
top: -65px;
gauche: 0px;
}
/ * Ces propriétés définissent l'arrière-plan interne du curseur de volume. * /
Volume-bouton .mejs-volume-totale .sample .mejs-commandes {
background: # 333333;
fond: rgba (0,0,0,0.8);
gauche: 7px;
largeur: 6px;
hauteur: 50px;
}
/ * Ces propriétés définissent l'apparence de la quantité de volume de curseur. * /
.sample .mejs-commandes .mejs-volume-bouton .mejs volume courant {
gauche: 7px;
largeur: 6px;
background: # 335D7C;
fond: rgba (51,93,124,0.8);
hauteur: 50px;
}
/ * Cette propriété permettrait de définir une poignée de défilement du volume. Cette peau n'utilise pas. * /
.sample .mejs-commandes .mejs-volume-bouton .mejs-volume-handle {
display: none;
}
/ * Ceci définit la couleur du texte du code temporel. * /
.mejs-Commandes .sample .mejs-intervalle de temps {
color: # 000000;
}
/ * Ceci est le récipient qui enveloppe le code temporel en cours. * /
.sample .mejs-commandes de-currenttime-conteneur {
position: absolute;
top: 32px;
droite: 100px;
border: 1px solid # 999999;
background: # 333333;
couleur: #FFFFFF;
padding-top: 2px;
border-radius: 3px;
}
/ * Ceci est le récipient qui enveloppe le code temporel de longueur. * /
.sample .mejs-contrôles .mejs durée conteneur {
position: absolute;
top: 32px;
droite: 65px;
border: 1px solid # 999999;
fond: #FFFFFF;
color: # 333333;
padding-top: 2px;
border-radius: 3px;
color: # 333333;
}
/ * Ceci définit la taille et la position du bouton de sous-titres. * /
.mejs-des contrôles .sample .mejs-titres bouton {
position: relative;
largeur: 24px;
droite: 4px;
top: 0px;
}
/ * Ceci définit la balise bouton de sous-titres. * /
.mejs-des contrôles .sample .mejs-titres-bouton {
largeur: 24px;
hauteur: 24px;
gauche: -1px;
top: 0px;
background: url (Sprites / sample.png) no-repeat 0 -96px;
}
|
Vous pouvez importer les peaux et les ajouter à la liste des peaux qui peuvent être appliquées aux contrôleurs audio et vidéo. Pour plus de détails au sujet de l' application d' une peau au contrôleur audio, voir Application d' une peau au contrôleur audio . Pour plus de détails au sujet de l' application d' une peau au contrôleur vidéo, voir Application d' une peau au contrôleur vidéo .
|
Voir également: |
Soutien | A propos de Trivantis
© Copyright Trivantis 2017