Share
Koding av Orman Clarks Premium Pixel-design er veldig morsomt, denne gangen tar vi en titt på hans Video Player Interface! Vi bygger den ved hjelp av et fantastisk HTML5-videobibliotek kalt jPlayer sammen med noen HTML og CSS.
Vi starter med å kaste sammen et tomt HTML5-dokument, mens du husker kilde jQuery i hodet (jeg bruker jQuery vert for Google). Jeg vil også koble til den nyeste HTML-shiv som vil sikre at Internet Explorer tolker og stiler HTML5-elementer riktig.
En siste ting, du vil merke at jeg har koblet til et stilark også, vi legger til CSS senere i opplæringen.
Deretter må vi laste ned jPlayer "The jQuery HTML5 Audio / Video Library". Gå videre til jplayer.org og last ned den nåværende utgivelsen.
Gå videre og lag en mappe med navnet "javascript" eller "js" (eller hva du er vant til) i webmappen din og kopi jquery.jplayer.min.js i det. Deretter må du koble til dette i HTML-koden din, så legg til følgende i din seksjon (husker å endre stien etter behov).
Nå legger vi til oppslaget vi trenger for å opprette spilleren. Ikke bekymre deg hvis det ser overveldende ut, det meste av dette er tatt fra demoer på jplayer.org-siden, og jeg vil forklare alt som er nødvendig senere.
Oppdatering nødvendig Her er en melding som vil vises hvis videoen ikke støttes. Et Flash-alternativ kan brukes her hvis du har lyst på det.
For det første ser du en hovedbeholder for alt. Vi bruker noen globale stilarter til det. Deretter er det div "# jquery_jplayer_1" som jPlayer-skriptet vil målrette og legge til videoen til (du vil se dette ID referert i jQuery-funksjonen når vi legger til det).
Du trenger egentlig bare å bekymre deg med hva som er inni Nå for de gode greiene ... Her har vi lagt til våre kontroller, alle kommenterte for klarhet. For å sparke, fortsetter spilleknappen vår med pauseknappen. Disse er begge gitt passende klassenavn for styling senere. Deretter har vi et span med en klasse av "separator". Orman brukte noen fine små separatorer i designet, siden disse er separatorer med en gradient på dem, vil vi bruke et bilde for disse (selv om du er fri til å bruke CSS3-gradienter hvis du er sikker). Deretter lager vi fremdriftslinjen, og det er noen elementer som går inn for å bygge dette. Først har vi jp-fremgang, som er grunnlaget for fremdriftslinjen. Deretter har vi 'jp-play-bar'. Dette er den kule røde linjen som ruller på tvers av signifikant fremgang av videoen. Merk at vi også bruker et spenning med en klasse av "håndtak" her for å lage den lille knappen som vises i designet. Nå for nåværende tid og varighet av videoen. Vi lager disse igjen med divs, med klassene 'jp-nåværende tid' og 'jp-varighet'. Merk at vi også brukte en annen span-klasse igjen, denne gangen for å opprette en annen separator, men å bruke en fremoverstreke slik at ingen bilder vil bli brukt her. Etter det ser du at vi har en annen separator, samme som tidligere. Volumknappene og linjen må da gjøres. Først skal vi opprette to knapper, 'jp-mute' og 'jp-unmute'. Bare en av disse vil bli vist om gangen, den andre vil bli skjult med jPlayer. Volumelinjen har de samme prinsippene som fremdriftslinjen, samme struktur (selv om forskjellige klassenavn åpenbart er). Hvis du ser filen i nettleseren, ser du ikke så mye som mulig ennå. Nå hoveddelen, vi legger til en video! For full funksjonalitet og nettleserstøtte trenger du videoen din tilgjengelig i flere formater. HTML5-medieformater som støttes av jPlayer, er: Ulike nettlesere støtter forskjellige videoformater; Det relevante formatet vil bli valgt avhengig av nettleseren, forutsatt at den er gjort tilgjengelig. Sjekk ut caniuse.com for mer informasjon om hvem, hva og hvor. Vi trenger også en .png-fil som fungerer som en plakat for når filmen ikke spiller. I denne veiledningen bruker jeg en filmtrailer lastet ned fra http://trailers.apple.com. Jeg konverterte den deretter til de riktige formatene (det er mange gratis online ressurser for å hjelpe deg her, Google bort ...) Så når du har konvertert dem og opprettet din .png-plakat, plasser dem et passende sted i prosjektet ditt. Deretter må vi legge til en instantieringsbit for å få jPlayer oppe. Legg til følgende på foten av dokumentet, og husk å endre filbanene for å gjenspeile ditt eget. Du ser at vi peker jPlayer til elementet "# jquery_jplayer_1". Sjekk ut dokumentasjonen for jPlayer for flere alternativer og attributter. OK, du burde ha noe som ligner på dette: Før vi kommer inn i å legge til noen CSS for kontrollgrensesnittet, legger vi til en bakgrunn, fonter etc. til kroppen og også stilene for foten av videoen. Fortsett og lag et stilark, husk å koble til det i hovedenheten på nettsiden din. Jeg har også kastet i en tilbakestilling bare incase din nettleser bestemmer seg for å legge til noen marginer og whatnot! Etter tilbakestillingsreglene har jeg lagt til en bakgrunn med et bilde. Deretter har jeg målrettet mot hele spilleren (videoen og kontrollene), jeg har gitt den en skriftfamilie og lagt til noen bokseskygger (mens du husker å bruke nettleserprefiksetene!). Vi har da gitt det stiler for når spilleren er i fullskjermmodus. Du bør nå ha noe som ligner på følgende: Tid til å starte styling opp kontrollen delen! Vi vil først stile den grunngrå delen. Vi bruker en væskebredde på 100%, dette brukes slik at den strekker seg til full bredde når den er i fullskjermmodus. Jeg har også lagt til en fast høyde på 35px. Deretter bruker vi en gradient for bakgrunnen, jeg gikk videre og opprettet dette ved å bruke GradientApp og deretter ryddet det opp med Prefixr API. Endelig har jeg lagt til en bokseskygge for å lage innskyggingsskyggene, og husker igjen å bruke nettleserprefiksetene. Jeg har neste gang lagt til noen stiler for kontrollholderen (i utgangspunktet en beholder), slik at vi kan sentrere kontrollpanelet når i fullskjermmodus. Du får se hvordan dette fungerer senere. Jeg har brukt en fast bredde på 570px og sentrert den med Du bør ikke se mye endring siden siste skritt unntatt gradientbakgrunnen vi nettopp har lagt til: Neste legger vi til avspillings- og pause-knappene, sammen med separatoren. Jeg bruker en sprite for alle knappene, som du kan ta i kildefilene. Jeg har først definert bredde og høyde for både pause og spillknappene, de har begge de samme dimensjonene. Deretter har jeg lagt til et tekstinntrykk for å skyve noen tekst i ankerlinkene fra skjermen, ettersom vi ikke trenger dem, vi bruker spritbildet. Til slutt vil vi bruke Ok, først vil vi målrette fremdriftslinjebasen. Vi gir den en solid bakgrunn, legger til en grense-radius på 5px (med prefiksene), to boksskygger, en dråpeskygge og en innskuddskygge. Deretter legger vi til noen bredder og høyder, begge faste. Vi legger da litt margin-topp bare for å sentrere den i hele grensesnittet. Deretter legger vi til noen stiler for søylinjen som viser hvor mye videoen har lastet inn. Vi bruker en bredde på 0px fordi jPlayer vil håndtere den faktiske bredden dynamisk og en høyde på 100% slik at den vil arve fremdriftslinjens høyde, fylle den opp. Vi gir også den grensen radius på 5px og en bakgrunn. Til slutt lager vi fremdriftslinjen som beveger seg når videoen spilles. Jeg skal bruke et bilde og gjenta det på y-aksen. Igjen, som tidligere vil vi legge til en bredde på 0px og jPlayer vil håndtere resten. Husk deretter at span-koden vi opprettet? Dette vil bli brukt til håndtaket. Vi bruker et bilde for dette også, og plasserer det helt. Vi må bruke Tid til å gjøre tid (snigger) Seriøst skjønt, la oss stilke opp nåværende tid og varighet. Vi vil målrette dem begge først for å bruke noen stiler de vil dele. Resten er grunnleggende ting som marginer. Vi er ikke langt fra ferdigstillelse nå, så la oss håndtere volumdelen. Vi trenger to knapper, deaktivere og deaktivere. Vi vil bruke noen styling til begge og deretter sprite til hver enkelt individuelt. Merk vi har brukt Vi er på siste skritt nå! Alt vi har igjen er fullskjermknappen. Ved hjelp av lignende trinn som før, bruker vi sprite igjen, bruk tekstinnrykk for å skjule teksten (også kjent som pushing-it-off-the-screen). Og husk å bruke Og vår videospiller er fullført! Gå videre og prøv fullskjerm-funksjonen, det er kjempebra! Ved å bruke jPlayer-plugin og Ormans nydelige design, har vi kodet opp et piksel perfekt videospiller grensesnitt. Ikke glem, jPlayer har mange flere triks opp på ermet, så sørg for at du sjekker ut demoer og dokumentasjon. Jeg håper du likte denne opplæringen, takk for å lese.
Trinn 4: Kontrollerer Markup
spill pause
Trinn 5: Legge til en video
Trinn 6: Video Base CSS
html, kropp, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, en, abbr, og, adresse, sitere, kode, del, DFN, em, img, ins, kbd, q, s, samp, liten, streik, sterk, sub, sup, tt, Var, b, u, i, dl, dt, dd, ol, ul, li, feltsett, form, etikett, legende, bord, bildetekst, tbody, TFOOT thead, st, th, td, artikkel, side, lerret, detaljer, embed, figur, figcaption, bunntekst, header, hgroup, meny, nav, utgang, rubin, seksjon, sammendrag, tid, mark, lyd, video, inngang, tekstfelt velg bakgrunn: gjennomsiktig; kant: 0; font-size: 100%; margin: 0; omriss: 0; padding: 0; vertical-align: baseline artikkel, bortsett detaljer, figcaption, figur, footer, header, hgroup, meny, nav, del display: block body linjehøyde: 1 abbr [tittel], dfn [title] border-bottom: 1px dotted; cursor: hjelpe formatering for blokksitat, q anføres: ingen innrykket tekst: før, innrykket tekst: etter, q: før, q: etter innhold: none del tekst-dekorasjon: linje-through hr bakgrunn: gjennomsiktig; kant: 0; klar: begge, farge: gjennomsiktig; høyde: 1 px; margin: 0; padding: 0 mark bakgrunnsfarge: # ffffb3; font-type: kursiv inngang velg vertikal-Justering: middel ins backgro und-farge: rød, farge: hvit; tekst-dekorasjon: ingen ol, ul listestil: ingen tabell grensekollaps: kollaps; grenseavstand: 0 en tekstdekorasjon: ingen; kropp margin: 0; padding: 0; bakgrunn: url ("bg.jpg") gjenta; .jp-video font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; stilling: i forhold; -webkit-boks-skygge: 0px 0px 20px rgba (0,0,0, .3); -moz-box-skygge: 0px 0px 20px rgba (0,0,0, .3); boks-skygge: 0px 0px 20px rgba (0,0,0, .3); .jp-video-360p bredde: 570px; margin: 100px auto; .jp-video-full width: 480px; høyde: 270px; posisjon: statisk! viktig; posisjon: relative .jp-video-full .jp-jplayer topp: 0; venstre: 0; posisjon: fast! viktig; stilling: relativ; / * Regler for IE6 (fullskjerm) * / overløp: skjult; z-indeks: 1.000; .jp-video-full .jp-gui posisjon: fast! viktig; posisjon: statisk; / * Regler for IE6 (fullskjerm) * / topp: 0; venstre: 0; bredde: 100%; høyde: 100%; z-indeks: 1.000; .jp-video-full .jp-grensesnitt posisjon: absolutt! viktig; stilling: relativ; / * Regler for IE6 (fullskjerm) * / bunn: 0; venstre: 0; z-indeks: 1.000; 
Trinn 7: Grunnleggende kontroller Styling
margin: 0 auto; .jp-grensesnitt posisjon: relativ; bredde: 100%; høyde: 35px; bakgrunnsbilde: -webkit-lineær-gradient (topp, rgb (242, 242, 242), rgb (209, 209, 209)); bakgrunnsbilde: -moz-lineær-gradient (topp, rgb (242, 242, 242), rgb (209, 209, 209)); bakgrunnsbilde: -o-lineær gradient (topp, rgb (242, 242, 242), rgb (209, 209, 209)); bakgrunnsbilde: -ms-lineær gradient (topp, rgb (242, 242, 242), rgb (209, 209, 209)); bakgrunnsbilde: lineær gradient (topp, rgb (242, 242, 242), rgb (209, 209, 209)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f2f2f2', EndColorStr = "# d1d1d1"); -webkit-boks-skygge: innsett 0px 1px 0px # f7f7f7, innsett 0px -1px 0px # e2e2e2; -moz-boks-skygge: innsett 0px 1px 0px # f7f7f7, innspill 0px -1px 0px # e2e2e2; boksskygge: innspill 0px 1px 0px # f7f7f7, innspill 0px -1px 0px # e2e2e2; div.jp-controls-holder clear: both; bredde: 570px; margin: 0 auto; stilling: relativ; flow: hidden;
Trinn 8: Spill og pause knapper
skissere: none; som vil løse et problem når du klikker, forhindrer at noen nettlesere viser en horrid blå glød rundt knappen. a.jp-play, a.jp-pause bredde: 40px; høyde: 35px; float: venstre; text-indent: -9999px; skissere: none; a.jp-play background: url ("sprite.png") 0 0 no-repeat; a.jp-pause bakgrunn: url ("sprite.png") -40px 0 no-repeat; skjerm: ingen; . separator bakgrunnsbilde: url ("separator.png"); background-repeat: no-repeat; bredde: 2px; høyde: 35px; float: venstre; margin-topp: 7px; margin-høyre: 10px;
Trinn 9: Progress Bar
høyre: XXpx; for å sikre at den beveger seg sammen med spillestangen. .jp-fremgang bakgrunn: # 706d6d; -webkit-border-radius: 5 px; -moz-border-radius: 5 px; border-radius: 5 px; -webkit-boks-skygge: innsett 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); -moz-boks-skygge: innsett 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); boksskygge: innsett 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); bredde: 280 piksler; høyde: 10px; float: venstre; margin-topp: 13px; .jp-seek-bar width: 0px; høyde: 100%; markør: pointer; .jp-seeking-bg bakgrunn: # 575555; -webkit-border-radius: 5 px; -moz-border-radius: 5 px; border-radius: 5 px; .jp-play-bar bakgrunn: url ("play-bar.png") venstre repetisjon-x; bredde: 0 px; høyde: 10px; stilling: i forhold; z-indeks: 9999; -webkit-border-radius: 5 px; -moz-border-radius: 5 px; border-radius: 5 px; .jp-spillestangsposisjon posisjon: absolutt; topp: -3px; høyre: -12px; bakgrunn: url ("handle.png") no-repeat center; bredde: 16px; høyde: 17px; 
Trinn 10: Nåværende tid / varighet
.jp-nåværende tid, .jp-varighet font-size: 11px; font-family: Arial; color: # 444444; margin-topp: 12px; float: venstre; .jp-nåværende tid float: left; display: inline; .jp-duration float: left; display: inline; tekstjustering: høyre; .jp-video .jp-nåværende tid margin-left: 10px; .jp-video .jp-duration margin-right: 10px; .time-sep float: left; margin: 13px 3px 0 3px; font-size: 11px; font-family: Arial; color: # 444444;
Trinn 11: Volumknapper og Bar
skissere: none; igjen for å unngå den problematiske aktive tilstanden. For å lage volumlinjen bruker vi en lignende prosess til fremdriftslinjen. Vi bruker en fast bredde og høyde, gir den en bakgrunn, noen bokseskygger og en grenseradius på 5px. Volumelinjen i seg selv er gjennomsiktig, slik at vi ikke bruker bakgrunnen til det. Neste har vi en annen knott; Ved å bruke et spann igjen bruker vi et bakgrunnsbilde stilling: absolutt; og plasser den til høyre slik at den beveger seg riktig. .jp-video a.jp-demp, .jp-video a.jp-unmute text-indent: -9999px; float: venstre; høyde: 35px; skissere: none; .jp-mute float: left; bakgrunn: url (... /images/sprite.png) -80px 0 no-repeat; margin-topp: 1px; margin-venstre: -10px; bredde: 35px; a.jp-unmute bakgrunn: url (... /images/sprite.png) -115px 0 no-repeat; margin-topp: 1px; margin-venstre: -13px; skjerm: ingen; bredde: 38px; .jp-volum-bar float: left; margin-topp: 13px; margin-høyre: 10px; flow: hidden; bredde: 70 piksler; høyde: 10px; markør: pointer; bakgrunn: # 706d6d; -webkit-border-radius: 5 px; -moz-border-radius: 5 px; border-radius: 5 px; -webkit-boks-skygge: innsett 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); -moz-boks-skygge: innsett 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); boksskygge: innsett 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); .jp-volum-bar-verdi bakgrunn: gjennomsiktig; bredde: 0 px; høyde: 10px; stilling: relativ; .jp-volum-bar-verdi span posisjon: absolutt; topp: 0px; høyre: 0px; bakgrunn: url (... /images/volume.png) no-repeat center; bredde: 11px; høyde: 10px;
Trinn 12: Fullskjerm-knapp
skissere: none; igjen (som sikkert kunne brukes på alle ankre i begynnelsen av stilarket). .jp-fullskjerm bakgrunn: url (... /images/sprite.png) -150px 0 no-repeat; float: venstre; bredde: 40px; høyde: 35px; text-indent: -9999px; margin-venstre: -15px; skissere: none; .jp-restore-skjerm bakgrunn: url (... /images/sprite.png) -150px 0 no-repeat; float: venstre; bredde: 40px; høyde: 35px; text-indent: -9999px; margin-venstre: -15px; skissere: none;
Konklusjon
Accentsconagua