Sie können den Rahmen des Media-Players anpassen, indem Sie das Erstellen und Ihre eigene Haut anwenden.
Eine Haut besteht aus einem. Verpackt Zip - Datei , die eine. CSS - Datei und ein Sprite. Png - Bilddatei die Komponente Grafiken enthält. . Die CSS - Datei definiert die Einstellungen für die Hautkomponenten: Steuerleiste, Display, Dock und Playlist. Verwenden Sie Ihre bevorzugten Bildeditor zu entwerfen und die visuellen Elemente speichern, die die Haut und Link zu ihnen bilden in der Haut. CSS - Datei.
|
|
Flash-basierte benutzerdefinierte Skins verwendet in Lectora Online3.0 und älter wird nicht mehr funktionieren. Verwenden Sie eine der Häute inLectora Online oder konvertieren, neu zu erstellen, oder die gewünschte benutzerdefinierte Skin erstellen. |
Das Programm nutzt die benutzerdefinierte Skin - Format des JW Player 5, dem führenden Media - Player auf dem Internet heute. Der Spieler ist einfach zu konfigurieren, anpassen und erweitern. Einzelheiten zu den Skins für den JW Player 5 zu schaffen, besuchen http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/14/building-skins .
Um eine benutzerdefinierte Haut mit dem neuen Format zu erstellen:
Erstellen Sie ein Sprite. Png - Image - Datei alle Bilder für die Haut enthalten. Nennen Sie das Sprite. Png Bild das gleiche wie der Name der benutzerdefinierten Skin - Datei. Mehrere Sprite Bild Schöpfer sind im Internet verfügbar. Mit Tasten , die die gleiche Breite und Höhe sind empfohlen. Zusätzlich sollten die Bilder die gleiche Höhe, die Sie für die Höhe des Controllers wollen.
|
|
Sprite - Bilder sollten eine Höhe von 24 Pixel betragen. Kontakt Unterstützung , wenn Sie erfordern größere Sprite Bilder höher als 24px. |
Beachten Sie die X- und Y - Position jedes der Bilder in der Sprite - Bilddatei. Diese Koordinaten werden benötigt , wenn Sie die erstellen. CSS - Datei in Schritt 3.
Beispielsweise sind hier die X und Y-Positionen und Abmessungen für das Bild Beispiel Sprite in Schritt 1 dargestellt:
| Hautbild | X, Y-Position | Breite | Höhe |
| Hintergrundbild | 0, 0 | 80 | 24 |
| Play-Taste | 0, 24 | 20 | 24 |
| Spielen Hoverschaltfläche | 20, 24 | 20 | 24 |
| Pause-Taste | 40, 24 | 20 | 24 |
| Pause Hoverschaltfläche | 60, 24 | 20 | 24 |
| Vollbild-Taste | 0, 48 | 20 | 24 |
| Vollbild-Hoverschaltfläche | 20, 48 | 20 | 24 |
| Unfullscreen Taste | 40, 48 | 20 | 24 |
| Unfullscreen Hoverschaltfläche | 60, 48 | 20 | 24 |
| Mute-Taste | 0, 72 | 20 | 24 |
| Mute Hoverschaltfläche | 20, 72 | 20 | 24 |
| Unmute Taste | 40, 72 | 20 | 24 |
| Unmute Hoverschaltfläche | 60, 72 | 20 | 24 |
| Bildunterschriften Schaltfläche | 0, 96 | 24 | 24 |
| TimeHandle | 24, 96 | 6 | 16 |
Erstellen Sie die. CSS - Datei für die Haut, unter der bereitgestellten Beispiel CSS - Datei geführt. Nennen Sie das. CSS - Datei die gleiche wie die Haut innerhalb der Datei gestattet.
Je nach dem Namen Ihrer Haut, ersetzen Sie sampleentsprechend.
Zum Beispiel:
sampleist zu ersetzen mit. YourSkinName
und sample.pngist mit ersetzt werden yourSkinName.png .
Beispiel :
div [id ^ = "video"] .sample .mejs-Kontrollen {
background: url (Sprites / sample.png) 0px 0px;
Höhe: 24px;
unten: -24px;
}Ihre Haut :
div [id ^ = "video"] .yourSkinName .mejs-Kontrollen {
background: url (Sprites / yourSkinName.png) 0px 0px;
Höhe: 24px;
unten: -24px;
}
Jedes der Bilder, die die Haut bildet erfordert seine jeweilige CSS - Klasse. Für den Hintergrund verwenden MEJS-Steuerelemente , die auf dem Hintergrundbild innerhalb des Sprite verweisen. dies wird mit Hintergrund durchgeführt , url(Sprites/sample.png) 0px 0px
wo 0px 0pxdie X- und Y - Position innerhalb des Sprite - Bild darstellt. Verwenden Sie die Klassen für die Audio- und Video entsprechend wie in der Probe. Gezeigt CSS unten.
Ändern Sie die Höhe entsprechend zu Ihrem Bild. Wenn Sie die Steuerleiste möchte unter dem Video zu sein, entsprechend der unteren Eigenschaft ändern.
Ersetzen Sie die anderen Steuerelemente mit ihren jeweiligen Bild und Größen.
Beispielsweise:
.sample .mejs-Kontrollen .mejs-Pause-Taste {
Breite: 20px;
Höhe: 24px;
background: url (Sprites / sample.png) no-repeat -40px -24px;
margin: 0;
padding: 0;
}
Man beachte, dass die x und y-Position sind negativ die entsprechende CSS-Offset-Position zu zeigen.
Für die Zeitschiene und Lautstärkeregler, ändern Sie die Hintergrundfarbe nach Ihren Wünschen. Verwenden Sie RGBA-Werte mit einem Alpha-Transparenz anzuzeigen, und verwenden Sie auch einen Hex-Wert ältere Browser zu unterstützen.
Sobald die CSS- und Sprite - Image - Dateien abgeschlossen sind, zip sie zusammen. Die. Zip Name sollte Ihr passen. Css Dateinamen.
Beispiel CSS-Datei
/ * Stellen Sie sicher, dass diese den Namen der CSS-Datei übereinstimmt. Zum Beispiel, wenn Sie Ihre CSS-Datei sample.css genannt wird, stellen Sie sicher, dass diese Klasse .mejs-container.sample * genannt wird /
.mejs-container.sample {
}
/ * Dies ist der Behälter für alle der Reglerelemente. * /
.sample .mejs-Kontrollen {
position: absolute;
bottom: 0;
Breite: 100%;
}
/ * Diese 2 ID Blöcke definieren für die Video- / Audio-Controller für Lectora das Hintergrundbild. * /
div [id ^ = "video"] .sample .mejs-Kontrollen {
background: url (Sprites / sample.png) 0px 0px;
Höhe: 24px;
unten: -24px;
}
div [id ^ = "audio"] .sample .mejs-Kontrollen {
background: url (Sprites / sample.png) 0px 0px;
Höhe: 24px;
bottom: 0;
}
/ * Diese 2 ID Blöcke definieren für die Video- / Audio-Controller für Lectora Online das Hintergrundbild. * /
div [id ^ = "vid"] .sample .mejs-Kontrollen {
background: url (Sprites / sample.png) 0px 0px;
Höhe: 24px;
unten: -24px;
}
div [id ^ = "sndtobj"] .sample .mejs-Kontrollen {
background: url (Sprites / sample.png) 0px 0px;
Höhe: 24px;
bottom: 0;
}
/ * Dies definiert die Position und Größe des Zeitschieberegler von links und oben. Der Zeitschieber ist der Balken, der den Fortschritt der Mediendatei zeigt. * /
.sample .mejs-Zeit-Schieberegler {
links: 20px;
top: 4px;
Höhe: 8px;
display: inline-block;
}
/ * Dies stellt die Position des Zeit Schieber relativ zu der Breite des Reglers. * /
.sample .mejs Zeit {
top: 0px;
left: 0px;
position: relative;
}
/ * Dies ist der Zeitcode-Container. * /
.sample .mejs-Kontrollen .mejs Zeit {
background: url (Sprites / sample.png) repeat-x 0 0;
Höhe: 17px;
position: relative;
top: 0px;
}
/ * Dies ist die Medienfortschrittsbalken. * /
.sample .mejs-Kontrollen .mejs-Zeit-Schiene {
background: url (Sprites / sample.png) repeat-x 0 0;
Höhe: 22px;
}
/ * Dies stellt die Farbe oder die Farbe und Alpha auf dem Browser abhängig, und die Höhe der Gesamtzeit-Schieberegler. * /
.sample .mejs-Kontrollen .mejs-Zeit-Schiene .mejs-Zeit-Gesamt {
background: # 383838;
Hintergrund: rgba (0,0,0,0.6);
Höhe: 8px;
}
/ * Dies legt die Höhe der Überbrückungszeit-Schieberegler. * /
.sample .mejs-Kontrollen .mejs-Zeit-Schiene .mejs-Zeit-Pufferung {
Höhe: 8px;
}
/ * Dies stellt die Farbe oder die Farbe und Alpha je nach Browser und Höhe der geladenen Zeitschieberegler. * /
.sample .mejs-Kontrollen .mejs-Zeit-Schiene .mejs zeit geladen {
background: # 808080;
Hintergrund: rgba (128,128,128,0.3);
Breite: 0;
Höhe: 8px;
}
/ * Dies stellt die Farbe oder die Farbe und Alpha auf dem Browser abhängig, und die Höhe der aktuellen Zeit-Schieberegler. * /
.sample .mejs-Kontrollen .mejs-Zeit-Schiene .mejs-Zeit-Strom {
background: # 335D7C;
Hintergrund: rgba (51,93,124,0.8);
Breite: 0;
Höhe: 8px;
}
/ * Dies definiert das Aussehen und die Position des Zeit Griff des zeit slider. * /
.sample .mejs-Kontrollen .mejs-Zeit-Schiene .mejs-Zeit-Griff {
Bildschirmsperre;
border: none;
margin: 0;
Breite: 6px;
links: -3px;
Höhe: 16px;
top: -5px;
background: url (Sprites / sample.png) no-repeat -24px -96px;
}
/ * Dies würde die Zeit-float, beschreiben aber diese Haut nicht ein nicht verwendet. * /
.sample .mejs-Kontrollen .mejs-Zeit-Schiene .mejs-Zeit-Schwimmer {
display: none;
}
/ * Dies definiert die Größe und Position der Play / Pause-Tasten. * /
.sample .mejs-Kontrollen .mejs-PLAY-PAUSE-Taste {
top: 0px;
left: 0px;
Breite: 20px;
Höhe: 24px;
}
/ * Dies definiert die Tag-Play-Taste. * /
.sample .mejs-Kontrollen .mejs-PLAY-PAUSE-Taste Taste {
Breite: 20px;
Höhe: 24px;
background: url (Sprites / sample.png) no-repeat 0 -24px;
margin: 0;
padding: 0;
}
/ * Dies definiert die Pause-Taste Tag. * /
.sample .mejs-Kontrollen .mejs-Pause-Taste {
Breite: 20px;
Höhe: 24px;
background: url (Sprites / sample.png) no-repeat -40px -24px;
margin: 0;
padding: 0;
}
/ * Dies definiert die Schwebezustand Play-Taste * /
.sample .mejs-Kontrollen .mejs-PLAY-PAUSE-Taste Taste: Hover {
background: url (Sprites / sample.png) no-repeat -20px -24px;
}
/ * Dies definiert die Schwebezustand Pause-Taste * /
.sample .mejs-Kontrollen .mejs-Pause-Taste: hover {
background: url (Sprites / sample.png) no-repeat -60px -24px;
}
/ * Dies definiert die Größe und Position der Vollbild / unfullscreen Tasten. * /
.sample .mejs-Kontrollen .mejs-Vollbild-Taste {
top: 0px;
rechts: 12px;
Breite: 20px;
Höhe: 44px;
Hintergrund: none;
}
/ * Dies definiert die Vollbild-Taste. * /
.sample .mejs-Kontrollen .mejs-Vollbild-Taste Taste {
Breite: 20px;
Höhe: 24px;
Hintergrund: transparent url (Sprites / sample.png) no-repeat 0 -48px;
margin: 0;
padding: 0;
}
/ * Dies definiert die unfullscreen Taste Tag. * /
.sample .mejs-Kontrollen .mejs-unfullscreen Taste {
Hintergrund: transparent url (Sprites / sample.png) no-repeat -40px -48px;
margin: 0;
padding: 0;
}
/ * Dies definiert die Vollbild-Taste schweben Zustand. * /
.sample .mejs-Kontrollen .mejs-Vollbild-Taste Taste: Hover {
Hintergrund: transparent url (Sprites / sample.png) no-repeat -20px -48px;
}
/ * Dies definiert die unfullscreen Taste schweben Zustand. * /
.sample .mejs-Kontrollen .mejs-unfullscreen Taste: Hover {
Hintergrund: transparent url (Sprites / sample.png) no-repeat -60px -48px;
}
/ * Dies definiert die Größe und Position der Ton ein / aus-Tasten. * /
.sample .mejs-Kontrollen .mejs-Volume-Taste {
top: 0px;
rechts: 0px;
Breite: 20px;
Höhe: 24px;
}
/ * Dies definiert die Mute-Taste-Tag. * /
.sample .mejs-Kontrollen .mejs-Mute-Taste {
background: url (Sprites / sample.png) no-repeat 0 -72px;
Breite: 20px;
Höhe: 24px;
margin: 0;
padding: 0;
}
/ * Dies definiert die unmute button-Tag. * /
.sample .mejs-Kontrollen .mejs-unmute Taste {
background: url (Sprites / sample.png) no-repeat -40px -72px;
Breite: 20px;
Höhe: 24px;
margin: 0;
padding: 0;
}
/ * Dies definiert die Mute-Taste schweben Zustand. * /
.sample .mejs-Kontrollen .mejs-Mute-Taste: hover {
background: url (Sprites / sample.png) no-repeat -20px -72px;
}
/ * Dies definiert die unmute Taste schweben Zustand. * /
.sample .mejs-Kontrollen .mejs-unmute Taste: Hover {
background: url (Sprites / sample.png) no-repeat -60px -72px;
}
/ * Diese Eigenschaften definieren das Aussehen und die Größe des äußeren Hintergrund des vertikalen Lautstärkeregler Pop-up. * /
.sample .mejs-Kontrollen .mejs-Volume-Taste .mejs-Volumen-Slider {
background: # C0C1E0;
Grenze: solid 1px # FFFFFF;
border-width: 1px 1px 0 1px;
Breite: 20px;
Höhe: 65px;
top: -65px;
left: 0px;
}
/ * Diese Eigenschaften definieren den inneren Hintergrund des Lautstärkeregler. * /
.sample .mejs-Kontrollen .mejs-Volume-Taste .mejs-Volumen-Gesamt {
background: # 333333;
Hintergrund: rgba (0,0,0,0.8);
links: 7px;
Breite: 6px;
Höhe: 50px;
}
/ * Diese Eigenschaften definieren das Aussehen des Lautstärkeregler Menge. * /
.sample .mejs-Kontrollen .mejs-Volume-Taste .mejs-Volumen-Strom {
links: 7px;
Breite: 6px;
background: # 335D7C;
Hintergrund: rgba (51,93,124,0.8);
Höhe: 50px;
}
/ * Diese Eigenschaft würde einen Lautstärkeregler Griff definieren. Diese Haut ist nicht eine solche verwenden. * /
.sample .mejs-Kontrollen .mejs-Volume-Taste .mejs-volume-handle {
display: none;
}
/ * Dies definiert die Textfarbe des Zeitcodes. * /
.sample .mejs-Kontrollen .mejs-Zeitspanne {
color: # 000000;
}
/ * Dies ist der Container, die aktuelle Zeitcode einwickelt. * /
.sample .mejs-Kontrollen .mejs-current-Container {
position: absolute;
top: 32px;
rechts: 100px;
border: solid 1px # 999999;
background: # 333333;
color: #FFFFFF;
padding-top: 2px;
border-radius: 3px;
}
/ * Dies ist der Container, die Länge der Zeit Code hüllt. * /
.sample .mejs-Kontrollen .mejs-Dauer-Container {
position: absolute;
top: 32px;
rechts: 65px;
border: solid 1px # 999999;
Hintergrund: #FFFFFF;
color: # 333333;
padding-top: 2px;
border-radius: 3px;
color: # 333333;
}
/ * Dies definiert die Größe und die Position der Untertitel-Taste. * /
.sample .mejs-Kontrollen .mejs-Titel-Taste {
position: relative;
Breite: 24px;
rechts: 4px;
top: 0px;
}
/ * Dies definiert die Bildunterschriften Schaltfläche Tag. * /
.sample .mejs-Kontrollen .mejs-Titel-Taste Taste {
Breite: 24px;
Höhe: 24px;
links: -1px;
top: 0px;
background: url (Sprites / sample.png) no-repeat 0 -96px;
}
|
Sie können Skins importieren und sie in die Liste der Skins hinzufügen , die an die Audio- und Video - Controller angewendet werden können. Einzelheiten über eine Haut an den Audio - Controller Anwendung finden eine Haut an den Audio - Controller anwenden . Einzelheiten über eine Haut an den Video - Controller Anwendung finden eine Haut auf den Video - Controller anwenden .
|
Siehe auch: |
Unterstützungt | Über Trivantis
© Copyright Trivantis 2017