Du kan anpassa ramen för mediaspelaren genom att skapa och tillämpa egna skinn.
En hud består av en paketerad. Zip -fil som innehåller en. Css -fil och en sprite. Png bildfil som innehåller komponent grafik. . Den css -fil definierar inställningarna för hudens komponenter: kontroll bar, display, docka, och spellistan. Använd din favorit bildredigerare för att utforma och spara de visuella element som utgör huden och länka till dem i hudens. Css -fil.
|
|
Flash-baserade anpassade skal som används i Lectora Onlne3,0 och äldre kommer inte längre att fungera. Använd ett av skalen finns iLectora Onlne eller konvertera, bygga, eller skapa önskad specialiserat skin. |
Programmet använder eget skal format av JW Player 5, den ledande mediaspelaren på Internet idag. Spelaren är lätt att konfigurera, anpassa och utöka. För information om att skapa mallar för JW Player 5, besök http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/14/building-skins .
Att skapa en anpassad huden med det nya formatet:
Skapa en sprite. Png bildfil som innehåller alla bilderna för huden. Namn spriten. Png bildfil samma som namnet på din anpassade hud. Flera sprite bildskapare finns på webben. Med knappar som har samma bredd och höjd rekommenderas. Dessutom bör bilderna vara samma höjd som du vill använda för höjden på styrenheten.
|
|
Sprite bilder bör inte överstiga en höjd av 24 bildpunkter. Kontakta support om du behöver större sprite bilder med högre än 24 bildpunkter. |
Notera X- och Y-positionen för var och en av bilderna i spriten bildfilen. Dessa koordinater behövs när du skapar. Css -fil i steg 3.
Till exempel, här är X och Y-positioner och dimensioner för exempel sprite bilden som visas i steg 1:
| hud Bild | X, Y-position | Bredd | Höjd |
| Bakgrundsbild | 0, 0 | 80 | 24 |
| play-knappen | 0, 24 | 20 | 24 |
| Spela hover-knappen | 20, 24 | 20 | 24 |
| pausknappen | 40, 24 | 20 | 24 |
| Pause hover-knappen | 60, 24 | 20 | 24 |
| helskärmsknappen | 0, 48 | 20 | 24 |
| Fullscreen hover-knappen | 20, 48 | 20 | 24 |
| Unfullscreen knapp | 40, 48 | 20 | 24 |
| Unfullscreen hover-knappen | 60, 48 | 20 | 24 |
| mute-knapp | 0, 72 | 20 | 24 |
| Mute hover-knappen | 20, 72 | 20 | 24 |
| Mikrofon på knappen | 40, 72 | 20 | 24 |
| Mikrofon på hover-knappen | 60, 72 | 20 | 24 |
| Bildtexter texter~~POS=HEADCOMP knappen | 0, 96 | 24 | 24 |
| TimeHandle | 24, 96 | 6 | 16 |
Skapa. Css -fil för huden, styrs av den medföljande prov CSS-fil nedan. Namnge. Css -fil på samma sätt som huden heter i filen.
Beroende på namnet på din hud, byt sampledärefter.
Till exempel:
sampleär att bytas ut mot. YourSkinName
och sample.pngska bytas ut med yourSkinName.png .
prov :
div [id ^ = "video"] .sample .mejs-kontroller {
bakgrund: url (älvor / sample.png) 0px 0px;
höjd: 24 bildpunkter;
bottom: -24px;
}Huden :
div [id ^ = "video"] .yourSkinName .mejs-kontroller {
bakgrund: url (älvor / yourSkinName.png) 0px 0px;
höjd: 24 bildpunkter;
bottom: -24px;
}
Var och en av de bilder som gör upp huden kräver sin respektive CSS-klass. För bakgrunden använder mejs-kontroller som pekar på bakgrundsbilden i spriten. Detta sker med bakgrund url(Sprites/sample.png) 0px 0px
där 0px 0pxrepresenterar X- och Y-position inom spriten bilden. Använd klasser för både ljud och video i enlighet med vad som anges i provet. Css nedan.
Ändra höjden i enlighet med bilden. Om du vill att kontrollfältet att vara under videon, ändra botten egendom i enlighet därmed.
Byt ut andra kontroller med deras respektive bild och storlekar.
Till exempel:
.sample .mejs-kontroller .mejs-pausknappen {
bredd: 20px;
höjd: 24 bildpunkter;
bakgrund: url (älvor / sample.png) no-repeat -40px -24px;
marginal: 0;
padding: 0;
}
Observera att x- och y-position är negativa för att visa rätt CSS förskjutna positionen.
För tillfället järnväg och volymreglage, ändra bakgrundsfärgen till din böjelse. Använd RGBA värden för att visa med en alfagenomskinlighet, och använda en hex värde samt att stödja äldre webbläsare.
När .css och sprite bildfiler är kompletta, zip ihop dem. Den. Zip namn ska matcha din. Css filnamn.
Prov CSS-fil
/ * Se till att detta överensstämmer med namnet på din .css fil. Till exempel, om din css-fil kallas sample.css, se till att den här klassen kallas .mejs-container.sample * /
.mejs-container.sample {
}
/ * Detta är behållaren för alla av regulatorelementen. * /
.sample .mejs-kontroller {
position: absolute;
bottom: 0;
bredd: 100%;
}
/ * Dessa 2 ID block definiera bakgrundsbild för video / audio controller för Lectora. * /
div [id ^ = "video"] .sample .mejs-kontroller {
bakgrund: url (älvor / sample.png) 0px 0px;
höjd: 24 bildpunkter;
bottom: -24px;
}
div [id ^ = "audio"] .sample .mejs-kontroller {
bakgrund: url (älvor / sample.png) 0px 0px;
höjd: 24 bildpunkter;
bottom: 0;
}
/ * Dessa 2 ID block definiera bakgrundsbild för video / audio controller för Lectora Online. * /
div [id ^ = "vid"] .sample .mejs-kontroller {
bakgrund: url (älvor / sample.png) 0px 0px;
höjd: 24 bildpunkter;
bottom: -24px;
}
div [id ^ = "sndtobj"] .sample .mejs-kontroller {
bakgrund: url (älvor / sample.png) 0px 0px;
höjd: 24 bildpunkter;
bottom: 0;
}
/ * Detta definierar läget och storleken på tidsreglaget från vänster och topp. Tids reglaget är baren som visar utvecklingen av mediefilen. * /
.sample .mejs-time-reglaget {
vänster: 20px;
top: 4px;
höjd: 8px;
display: inline-block;
}
/ * Detta ställer in positionen för tids reglaget relativt bredden av regulatorn. * /
.sample .mejs-tid {
top: 0px;
vänster: 0px;
positioner: relativ;
}
/ * Detta är tidskoden behållaren. * /
.sample .mejs-kontroller .mejs-tid {
bakgrund: url (älvor / sample.png) upprepa-x 0 0;
höjd: 17px;
positioner: relativ;
top: 0px;
}
/ * Detta är medieförloppsindikator. * /
.sample .mejs-kontroller .mejs-time-rail {
bakgrund: url (älvor / sample.png) upprepa-x 0 0;
höjd: 22px;
}
/ * Detta ställer in färg eller färg och alfa beroende på vilken webbläsare, och höjden på den totala tidsskjutreglaget. * /
.sample .mejs-kontroller .mejs-time-rail .mejs-time-totalt {
bakgrund: # 383.838;
bakgrund: RGBA (0,0,0,0.6);
höjd: 8px;
}
/ * Detta ställer höjden av bufferttidsskjutreglaget. * /
.sample .mejs-kontroller .mejs-time-skena .mejs-time-buffring {
höjd: 8px;
}
/ * Detta ställer in färg eller färg och alfa beroende på vilken webbläsare, och höjden på den laddade tidsskjutreglaget. * /
.sample .mejs-kontroller .mejs-time-skena .mejs-time-laddade {
bakgrund: # 808080;
bakgrund: RGBA (128,128,128,0.3);
bredd: 0;
höjd: 8px;
}
/ * Detta ställer in färg eller färg och alfa beroende på vilken webbläsare, och höjden på den aktuella tidsskjutreglaget. * /
.sample .mejs-kontroller .mejs-time-skena .mejs-time-ström {
bakgrund: # 335D7C;
bakgrund: RGBA (51,93,124,0.8);
bredd: 0;
höjd: 8px;
}
/ * Detta definierar utseendet och placeringen av tids handtaget på tidsreglaget. * /
.sample .mejs-kontroller .mejs-time-skena .mejs-time-handtag {
display: block;
gräns: none;
marginal: 0;
bredd: 6px;
vänster: -3px;
höjd: 16px;
top: -5px;
bakgrund: url (älvor / sample.png) no-repeat -24px -96px;
}
/ * Detta skulle beskriva tids flyta, men denna hud inte använder en. * /
.sample .mejs-kontroller .mejs-time-skena .mejs-time-float {
display: none;
}
/ * Detta definierar storleken och positionen för uppspelning / paus-knapparna. * /
.sample .mejs-kontroller .mejs-PLAYPAUSE-knappen {
top: 0px;
vänster: 0px;
bredd: 20px;
höjd: 24 bildpunkter;
}
/ * Detta definierar play-knappen tag. * /
.sample .mejs-kontroller .mejs-PLAYPAUSE-knapp {
bredd: 20px;
höjd: 24 bildpunkter;
bakgrund: url (älvor / sample.png) no-repeat 0 -24px;
marginal: 0;
padding: 0;
}
/ * Detta definierar pausknappen tag. * /
.sample .mejs-kontroller .mejs-pausknappen {
bredd: 20px;
höjd: 24 bildpunkter;
bakgrund: url (älvor / sample.png) no-repeat -40px -24px;
marginal: 0;
padding: 0;
}
/ * Detta definierar play-knappen hovringstillstånd * /
.sample .mejs-kontroller .mejs-PLAYPAUSE-knapp: hover {
bakgrund: url (älvor / sample.png) no-repeat -20px -24px;
}
/ * Detta definierar pausknappen hovringstillstånd * /
.sample .mejs-kontroller .mejs-pausknapp: hover {
bakgrund: url (älvor / sample.png) no-repeat -60px -24px;
}
/ * Detta definierar storleken och läget för helskärm / unfullscreen knapparna. * /
.sample .mejs-kontroller .mejs-fullscreen-knappen {
top: 0px;
höger: 12px;
bredd: 20px;
höjd: 44px;
bakgrund: none;
}
/ * Detta definierar fullskärmsknappen. * /
.sample .mejs-kontroller .mejs-fullscreen-knapp {
bredd: 20px;
höjd: 24 bildpunkter;
bakgrund: transparent url (älvor / sample.png) no-repeat 0 -48px;
marginal: 0;
padding: 0;
}
/ * Detta definierar unfullscreen knappen tag. * /
.sample .mejs-kontroller .mejs-unfullscreen knappen {
bakgrund: transparent url (älvor / sample.png) no-repeat -40px -48px;
marginal: 0;
padding: 0;
}
/ * Detta definierar fullscreen knapp hovringstillstånd. * /
.sample .mejs-kontroller .mejs-fullscreen-knapp: hover {
bakgrund: transparent url (älvor / sample.png) no-repeat -20px -48px;
}
/ * Detta definierar unfullscreen knappen hovringstillstånd. * /
.sample .mejs-kontroller .mejs-unfullscreen knapp: hover {
bakgrund: transparent url (älvor / sample.png) no-repeat -60px -48px;
}
/ * Detta definierar storleken och placeringen av ljudet / sätta på knapparna. * /
.sample .mejs-kontroller .mejs-volym-knappen {
top: 0px;
höger: 0px;
bredd: 20px;
höjd: 24 bildpunkter;
}
/ * Detta definierar avstängningsknappen tag. * /
.sample .mejs-kontroller .mejs-mute-knappen {
bakgrund: url (älvor / sample.png) no-repeat 0 -72px;
bredd: 20px;
höjd: 24 bildpunkter;
marginal: 0;
padding: 0;
}
/ * Detta definierar sätt på knappen tag. * /
.sample .mejs-kontroller .mejs-sätt på knappen {
bakgrund: url (älvor / sample.png) no-repeat -40px -72px;
bredd: 20px;
höjd: 24 bildpunkter;
marginal: 0;
padding: 0;
}
/ * Detta definierar avstängningsknappen hovringstillstånd. * /
.sample .mejs-kontroller .mejs-mute-knappen: hover {
bakgrund: url (älvor / sample.png) no-repeat -20px -72px;
}
/ * Detta definierar sätt på knappen hovringstillstånd. * /
.sample .mejs-kontroller .mejs-sätt på knappen: hover {
bakgrund: url (älvor / sample.png) no-repeat -60px -72px;
}
/ * Dessa egenskaper definierar utseendet och storleken på den yttre bakgrund av reglaget pop-up vertikal volym. * /
.sample .mejs-kontroller .mejs-volym-knapp .mejs-volymreglaget {
bakgrund: # C0C1E0;
border: solid 1px #FFFFFF;
gräns bredd: 1px 1px 0 1px;
bredd: 20px;
höjd: 65px;
top: -65px;
vänster: 0px;
}
/ * Dessa egenskaper definierar inre bakgrund av volymreglaget. * /
.sample .mejs-kontroller .mejs-volymknappen .mejs-volym totalt {
bakgrund: # 333333;
bakgrund: RGBA (0,0,0,0.8);
vänster: 7PX;
bredd: 6px;
höjd: 50px;
}
/ * Dessa egenskaper definierar utseendet på volymreglaget belopp. * /
.sample .mejs-kontroller .mejs-volym-knapp .mejs-volymström {
vänster: 7PX;
bredd: 6px;
bakgrund: # 335D7C;
bakgrund: RGBA (51,93,124,0.8);
höjd: 50px;
}
/ * Den här egenskapen skulle definiera en volymreglage handtag. Denna hud inte använder en. * /
.sample .mejs-kontroller .mejs-volym-knapp .mejs-volume-handle {
display: none;
}
/ * Detta definierar textfärg av tidskoden. * /
.sample .mejs-kontroller .mejs-tidsrymd {
color: # 000000;
}
/ * Detta är behållaren som sveper den aktuella tidskoden. * /
.sample .mejs-kontroller .mejs-Currentcontainer {
position: absolute;
top: 32px;
höger: 100px;
border: solid 1px # 999999;
bakgrund: # 333333;
färg: #FFFFFF;
padding-top: 2px;
border-radius: 3px;
}
/ * Detta är behållaren som sveper längden tidskoden. * /
.sample .mejs-kontroller .mejs varaktighet container {
position: absolute;
top: 32px;
höger: 65px;
border: solid 1px # 999999;
bakgrund: #FFFFFF;
color: # 333333;
padding-top: 2px;
border-radius: 3px;
color: # 333333;
}
/ * Detta definierar storlek och position på knappen bildtexter. * /
.sample .mejs-kontroller .mejs textning-knappen {
positioner: relativ;
bredd: 24 bildpunkter;
höger: 4px;
top: 0px;
}
/ * Detta definierar bildtexter knappen tag. * /
.sample .mejs-kontroller .mejs textning-knapp {
bredd: 24 bildpunkter;
höjd: 24 bildpunkter;
vänster: -1px;
top: 0px;
bakgrund: url (älvor / sample.png) no-repeat 0 -96px;
}
|
Du kan importera skinn och lägga till dem i listan över skinn som kan tillämpas på ljud- och videostyrenheter. För ytterligare information om att tillämpa en hud till audio controller, se Använda ett huden till audio controller . För ytterligare information om att tillämpa en hud till grafikkort finns tillämpa en hud till grafikkortet .
|
Se även: |
Support | Om Trivantis
© Copyright Trivantis 2017