Share
Kodning av Orman Clarks Premium Pixel-design är jättekul, den här gången tar vi en titt på hans Video Player Interface! Vi bygger det med ett fantastiskt HTML5-videobibliotek som heter jPlayer tillsammans med lite HTML och CSS.
Vi börjar med att kasta samman ett tomt HTML5-dokument, samtidigt som vi kommer ihåg källkoden jQuery i huvudet (jag använder jQuery värd Google). Jag länkar också till den senaste HTML-shiv som säkerställer att Internet Explorer tolkar och utformar HTML5-element på rätt sätt.
En sista sak, du noterar att jag har länkat till ett stylesheet också, vi lägger till CSS senare i handledningen.
Nästa behöver vi ladda ner jPlayer "The jQuery HTML5 Audio / Video Library". Gå vidare till jplayer.org och hämta den nuvarande versionen.
Gå vidare och skapa en mapp med namnet "javascript" eller "js" (eller vad du är van vid) i din webbmapp och kopiera jquery.jplayer.min.js Gillar det. Nästa måste du länka till det här i din HTML, så lägg till följande i din avsnitt (kom ihåg att ändra banan efter behov).
Vi lägger nu till den markering vi behöver för att skapa spelaren. Oroa dig inte om det verkar överväldigande, det mesta av detta tas från demos på jplayer.org-webbplatsen och jag förklarar allt som behövs senare.
Uppdatering krävs Här är ett meddelande som visas om videon inte stöds. Ett Flash-alternativ kan användas här om du gillar det.
För det första ser du en huvudbehållare för allt. Vi tillämpar några globala stilar på det. Då finns det div "# jquery_jplayer_1" som jPlayer-skriptet kommer att rikta in och lägga till videon till (du kommer se det här ID-numret i jQuery-funktionen när vi lägger till det).
Du behöver verkligen bara bekymra dig om vad som finns inom Nu för de bra sakerna ... Här har vi lagt till våra kontroller, alla kommenterade för tydlighet. För att sparka av, följde vår uppspelningsknapp följt av pausknappen. Dessa båda ges lämpliga klassnamn för styling senare. Därefter har vi en span med en klass av "separator". Orman använde några fina små separatorer i designen, eftersom dessa är separatorer med en gradient på dem använder vi en bild för dessa (men gärna använda CSS3-gradienter om du är säker). Därefter skapar vi framdriftsfältet och det finns några element som går in för att bygga detta. Först har vi jp-framsteg som ligger till grund för progressfältet. Nästa har vi jp-play-bar. Det här är den coola röda stapeln som rullar över signifikanta framsteg i videon. Observera att vi även använder ett spänne med en klass av "handtag" här för att skapa den lilla knoppen som visas i designen. Nu för videoens aktuella tid och varaktighet. Vi skapar dessa en gång till med div, med klasserna "jp-nuvarande tid" och "jp-duration". Observera att vi också använde en annan spänningsklass igen, den här gången för att skapa en annan separator men att använda en framåt snedstreck så att inga bilder kommer att användas här. Därefter ser vi att vi har en annan separator, samma som tidigare. Volymknapparna och stapeln måste sedan göras. Först skapar vi två knappar, 'jp-mute' och 'jp-unmute'. Endast en av dessa kommer att visas i taget, den andra kommer att vara gömd med jPlayer. Volymfältet har samma principer som framdriftsfältet, samma struktur (även om olika klassnamn är uppenbarligen). Om du tittar på filen i webbläsaren ser du inte för mycket än. Nu huvuddelen lägger vi till en video! För fullständig funktionalitet och stöd för cross-browser behöver du din video tillgänglig i flera format. HTML5-medieformat som stöds av jPlayer är: Olika webbläsare stöder olika videoformat; Det relevanta formatet kommer att väljas beroende på webbläsaren, om den är tillgänglig. Kolla in caniuse.com för mer information om vem, vad och var. Vi behöver också en .png-fil som fungerar som en affisch för när filmen inte spelas. För syftet med denna handledning använder jag en filmtrailer nedladdad från http://trailers.apple.com. Sedan konverterade jag det till rätt format (det finns gott om gratis online-resurser för att hjälpa dig här, Google bort ...) Så snart du har konverterat dem och skapat din .png-affisch, placera dem någonstans lämplig i ditt projekt. Därefter måste vi lägga till ett instantiation-fragment för att få jPlayer igång. Lägg till följande vid foten av ditt dokument och kom ihåg att ändra filvägarna för att spegla din egen. Du ser att vi pekar jPlayer till elementet "# jquery_jplayer_1". Kolla in dokumentationen för jPlayer för fler alternativ och attribut. OK, du borde ha något liknande det här: Innan vi går in på att lägga till några CSS för kontrollgränssnittet lägger vi till en bakgrund, teckensnitt etc. till kroppen och även stilar för basen av videon. Fortsätt och skapa ett stylesheet, kom ihåg att länka till det i huvuddelen av din webbsida. Jag har också kastat i en återställning bara incase din webbläsare beslutar att lägga till några marginaler och whatnot! Efter återställningsreglerna har jag lagt till en bakgrund med en bild. Nästa har jag riktat hela spelaren (videon och kontrollerna), jag har gett den en typfamilj och lagt till några boxskuggor (samtidigt som du kommer ihåg att använda webbläsarens prefix!). Vi har sedan gett det stilar för när spelaren är i fullskärmsläge. Du borde nu ha något liknande följande: Tiden att börja styling upp kontrollen sektionen! Vi ska först ställa in den basgrå delen. Vi använder en vätskebredd på 100%, den används så att den sträcker sig till full bredd när den är i helskärmsläge. Jag har också lagt till en fast höjd på 35px. Nästa använder vi en gradient för bakgrunden, jag gick vidare och skapade detta med GradientApp och rengjordes sedan med Prefixr API. Slutligen har jag lagt till en boxskugga för att skapa inskuggningsskuggorna, återigen komma ihåg att använda webbläsarens prefix. Jag har sedan lagt till några stilar för kontrollhållaren (i princip en behållare), så att vi kan centrera kontrollpanelen när den är i helskärmsläge. Du får se hur det här fungerar senare. Jag har använt en fast bredd på 570px och centrerad den med Du bör inte se mycket förändring sedan det sista steget förutom den gradientbakgrund som vi just har lagt till: Nästa lägger vi till spel- och pausknapparna, tillsammans med separatorn. Jag använder en sprite för alla knappar, som du kan ta tag i källfilerna. Jag har först definierat bredd och höjd för både paus och spelknappar, de har båda samma dimensioner. Nästa har jag lagt till en textinmatning för att trycka på någon text inom ankarlänkarna från skärmen eftersom vi inte behöver dem, vi använder spritbilden. Slutligen använder vi Okej, först kommer vi att rikta oss till progressbalkens bas. Vi ger den en solid bakgrund, lägger till en gränserad radie på 5px (med prefix), två rutaskuggor, en droppskugga och en insatsskugga. Nästa lägger vi till några bredder och höjder, båda fixerade. Vi lägger sedan till en marginal topp för att centrera den inom hela gränssnittet. Nästa lägger vi till några stilar för den sökande fältet som visar hur mycket videon har laddat. Vi applicerar en bredd på 0px eftersom jPlayer kommer att hantera den faktiska bredden dynamiskt och en höjd på 100% så att den kommer att erva i framdriftsfältets höjd och fylla upp det hela. Vi kommer också att ge den gränsenradie på 5px och en bakgrund. Slutligen skapar vi framdriftsfältet som rör sig när videon spelas. Jag använder en bild och upprepar den på y-axeln. Återigen, som tidigare lägger vi till en bredd på 0px och jPlayer hanterar resten. Därefter, kom ihåg den spännmärkning vi skapade? Detta kommer att användas för handtaget. Vi använder också en bild för detta och placerar den absolut. Vi måste använda Tid att göra tid (snigger) Allvarligt, men låt oss ställa upp aktuell tid och varaktighet. Vi ska rikta dem båda först för att tillämpa vissa stilar de delar. Resten är grundläggande saker som marginaler. Vi är inte långt ifrån nu, så låt oss hantera volymen. Vi behöver två knappar, dämpa och avaktivera. Vi tillämpar någon styling på båda och sedan spritet till var och en individuellt. Observera vi har använt Vi är på sista steget nu! Allt vi har kvar är helskärmsknappen. Med hjälp av liknande steg som tidigare applicerar vi sprite igen, använd textinmatning för att dölja texten (även kallad pushing-it-off-the-screen). Och kom ihåg att använda Och vår videospelare är klar! Fortsätt och försök på helskärmssystemet, det är fantastiskt! Genom att använda jPlayer plugin och Ormans underbara design, har vi kodat upp ett pixel perfekt videospelargränssnitt. Glöm inte, jPlayer har många fler tricks upp på ärmen, så se till att du kolla in demo och dokumentation. Jag hoppas att du haft denna handledning tack för att du läste.
Steg 4: Kontrollerar Markup
spela paus
Steg 5: Lägga till en video
Steg 6: Videobas CSS
html, kropp, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, en, förkortat, och, adress, citera, kod, del, DFN, em, img, ins, kbd, q, s, samp, liten, slag, stark, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, bilda, etikett, legend, bord, bildtext, tbody, tfoot, thead, tr, th, td, artikeln, åt sidan, duk, detaljer, bädda, figur, figcaption, sidfot, sidhuvud, hgroup, meny, nav, produktion, ruby, avsnitt, sammanfattning, tid, markera, ljud, video, insats, textarea, välj bakgrund: transparent; kant: 0; font-size: 100%; marginal: 0; kontur: 0; padding: 0; vertikal-align: baslinje artikel, åt sidan detaljer, figcaption, figur, footer, header, hgroup, meny, nav, avsnitt display: block kropp linjehöjd: 1 abbr [title], dfn [title] border-bottom: 1px prickad; hjälp blockquote, q citat: inga blockquote: före, blockquote: after, q: före, q: efter innehåll: none del text-decoration: line-through hr bakgrund: transparent; kant: 0; tydligt: båda; färg: transparent; höjd: 1px; marginal: 0; padding: 0 märke background-color: # ffffb3; font-style: italic inmatning väljer vertikal-align: mitten ins backgro und-färg: röd, färg: vit; text-dekoration: ingen ol, ul list-style: none table border collapse: collapse; border spacing: 0 a text-decoration: none; body marginal: 0; padding: 0; bakgrund: url ("bg.jpg") upprepning; .jp-video font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; positioner: relativ; -webkit-box-skugga: 0px 0px 20px rgba (0,0,0, .3); -moz-box-skugga: 0px 0px 20px rgba (0,0,0, .3); boxskugga: 0px 0px 20px rgba (0,0,0, .3); .jp-video-360p bredd: 570px; marginal: 100px auto; .jp-video-full width: 480px; höjd: 270px; position: statisk! viktig; position: relativ .jp-video-full .jp-jplayer top: 0; vänster: 0; position: fast! viktigt; position: relativ; / * Regler för IE6 (fullskärm) * / överfyllning: dold; z-index: 1000; .jp-video-full .jp-gui position: fast! viktigt; position: statisk / * Regler för IE6 (fullskärm) * / topp: 0; vänster: 0; bredd: 100%; höjd: 100%; z-index: 1000; .jp-video-full .jp-gränssnitt position: absolut! viktigt; position: relativ; / * Regler för IE6 (fullskärm) * / botten: 0; vänster: 0; z-index: 1000; 
Steg 7: Grundläggande kontroller Styling
marginal: 0 auto; .jp-gränssnitt position: relativ; bredd: 100%; höjd: 35px; bakgrundsbild: -webkit-linjär gradient (topp, rgb (242, 242, 242), rgb (209, 209, 209)); bakgrundsbild: -moz-linjär-gradient (topp, rgb (242, 242, 242), rgb (209, 209, 209)); bakgrundsbild: -o-linjär gradient (topp, rgb (242, 242, 242), rgb (209, 209, 209)); bakgrundsbild: -ms-linjär gradient (topp, rgb (242, 242, 242), rgb (209, 209, 209)); bakgrundsbild: linjär gradient (topp, rgb (242, 242, 242), rgb (209, 209, 209)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f2f2f2', EndColorStr = "# d1d1d1"); -webkit-box-skugga: inset 0px 1px 0px # f7f7f7, inset 0px -1px 0px # e2e2e2; -moz-box-skugga: inset 0px 1px 0px # f7f7f7, inset 0px -1px 0px # e2e2e2; boxskugga: inmatning 0px 1px 0px # f7f7f7, inmatning 0px -1px 0px # e2e2e2; div.jp-controls-hållare clear: both; bredd: 570px; marginal: 0 auto; position: relativ; overflow: hidden;
Steg 8: Spela upp och pausa knappar
beskriva: none; som kommer att åtgärda ett problem när du klickar, förhindrar att vissa webbläsare visar en mörk blå glöd runt knappen. a.jp-play, a.jp-paus bredd: 40px; höjd: 35px; flyta till vänster; text-indent: -9999px; beskriva: none; a.jp-play background: url ("sprite.png") 0 0 no-repeat; a.jp-paus background: url ("sprite.png") -40px 0 no-repeat; display: none; . separator bakgrundsbild: url ("separator.png"); background-repeat: no-repeat; bredd: 2px; höjd: 35px; flyta till vänster; marginal-topp: 7px; marginal-höger: 10px;
Steg 9: Progress Bar
höger: XXpx; för att säkerställa att den rör sig tillsammans med spellistan. .jp-framsteg bakgrund: # 706d6d; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-skugga: inset 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); -moz-box-skugga: inset 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); boxskugga: inset 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); bredd: 280px; höjd: 10px; flyta till vänster; marginal-topp: 13px; .jp-sök-bar bredd: 0px; höjd: 100%; markör: pekare; .jp-seeking-bg background: # 575555; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; .jp-play-bar background: url ("play-bar.png") vänster repeat-x; bredd: 0px; höjd: 10px; positioner: relativ; z-index: 9999; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; .jp-play-bar span position: absolute; topp: -3px; höger: -12px; bakgrund: url ("handle.png") no-repeat center; bredd: 16px; höjd: 17px; 
Steg 10: Aktuell tid / varaktighet
.jp-aktuell tid, .jp-duration font-size: 11px; font-family: Arial; color: # 444444; marginal-topp: 12px; flyta till vänster; .jp-nuvarande tid float: left; display: inline; .jp-duration float: left; display: inline; textjustera: höger; .jp-video .jp-aktuell tid margin-left: 10px; .jp-video .jp-duration margin-right: 10px; .time-sep float: left; marginal: 13px 3px 0 3px; font-size: 11px; font-family: Arial; color: # 444444;
Steg 11: Volymknappar och Bar
beskriva: none; igen för att undvika det problematiska aktiva tillståndet. För att skapa volymfältet använder vi en liknande process i framdriftsfältet. Vi applicerar en fast bredd och höjd, ger den en bakgrund, några rutaskuggor och en radie på 5 px. Volymen själv är transparent så vi kommer inte att tillämpa en bakgrund till den. Nästa har vi en annan knopp; Om du använder ett spann igen använder vi en bakgrundsbild, använd position: absolute; och placera den åt höger så den kommer att röra sig rätt. .jp-video a.jp-mute, .jp-video a.jp-unmute text-indent: -9999px; flyta till vänster; höjd: 35px; beskriva: none; .jp-mute float: left; bakgrund: url (... /images/sprite.png) -80px 0 no-repeat; margin-top: 1px; marginal-vänster: -10px; bredd: 35px; a.jp-unmute background: url (... /images/sprite.png) -115px 0 no-repeat; margin-top: 1px; marginal-vänster: -13px; display: none; bredd: 38px; .jp-volym-bar float: left; marginal-topp: 13px; marginal-höger: 10px; overflow: hidden; bredd: 70 bildpunkter; höjd: 10px; markör: pekare; bakgrund: # 706d6d; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-skugga: inset 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); -moz-box-skugga: inset 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); boxskugga: inset 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); .jp-volym-bar-värde bakgrund: transparent; bredd: 0px; höjd: 10px; position: relativ; .jp-volym-bar-värde span position: absolute; topp: 0px; höger: 0px; bakgrund: url (... /images/volume.png) no-repeat center; bredd: 11px; höjd: 10px;
Steg 12: Helskärmsknapp
beskriva: none; igen (vilket visserligen kunde tillämpas på alla ankare i början av stilarket). .jp-fullskärm background: url (... /images/sprite.png) -150px 0 no-repeat; flyta till vänster; bredd: 40px; höjd: 35px; text-indent: -9999px; marginal-vänster: -15px; beskriva: none; .jp-restore-screen bakgrund: url (... /images/sprite.png) -150px 0 no-repeat; flyta till vänster; bredd: 40px; höjd: 35px; text-indent: -9999px; marginal-vänster: -15px; beskriva: none;
Slutsats
Accentsconagua