Share
Codificarea design-ului Premium Pixel al lui Orman Clark este o distracție extraordinară, de data aceasta vom vedea o interfață video player! Îl vom construi utilizând o minunată bibliotecă video HTML5 numită jPlayer împreună cu câteva coduri HTML și CSS.
Vom începe prin a arunca împreună un document HTML5 necompletat, în timp ce amintește de sursa jQuery în cap (folosesc jQuery găzduit de Google). Voi conecta, de asemenea, la cel mai recent HTML shiv, care va asigura interpretările Internet Explorer și stiluri corecte ale elementelor HTML5.
Un ultim lucru, veți observa că am legat și eu o foaie de stil, vom adăuga CSS mai târziu în tutorial.
Apoi va trebui să descărcați jPlayer "Biblioteca audio / video jQuery HTML5". Folosiți jplayer.org pentru a descărca versiunea curentă.
Mergeți mai departe și creați un folder numit "javascript" sau "js" (sau orice ați obișnuit cu) în folderul dvs. Web și copiați jquery.jplayer.min.js în ea. În continuare, va trebui să vă conectați la acest lucru în HTML-ul dvs., astfel încât să adăugați următoarele în dvs. (amintiți-vă să schimbați calea, după caz).
Acum vom adăuga marcajul de care avem nevoie pentru a crea playerul. Nu vă faceți griji dacă pare copleșitoare, majoritatea sunt luate din demo-uri de pe site-ul jplayer.org și vă voi explica tot ce este necesar mai târziu.
Actualizare necesara Iată un mesaj care va apărea dacă videoclipul nu este acceptat. O alternativă Flash poate fi utilizată aici dacă vă place.
În primul rând, veți vedea un container principal pentru tot. Vom aplica anumite stiluri globale. Apoi este div "# jquery_jplayer_1" pe care scriptul jPlayer îl va viza și va adăuga videoclipul (veți vedea acest ID referit în funcția jQuery când adăugăm că).
Chiar trebuie doar să te îngrijești de ceea ce se află în interior Acum, pentru lucrurile bune ... Aici am adăugat controalele noastre, toate comentate pentru claritate. Pentru a da startul, butonul nostru de redare urmat de butonul de pauză. Acestea sunt date ambelor nume de clasă potrivite pentru styling mai târziu. Apoi, avem un interval cu o clasă de "separator". Orman a folosit niște separatoare mici în design, deoarece acestea sunt separatoare cu un gradient pe ele vom folosi o imagine pentru acestea (deși nu ezitați să utilizați gradienți CSS3 dacă sunteți încrezători). Apoi vom crea bara de progres și există câteva elemente care intră în construirea acesteia. Mai întâi avem "jp-progress", care este baza barei de progres. Apoi avem "jp-play-bar". Acesta este bara roșie răcoroasă care trece prin semnificația progresului videoclipului. Rețineți că, de asemenea, folosim o deschidere cu o clasă de "mâner" pentru a crea butonul mic prezentat în desen. Acum pentru timpul și durata curentă a videoclipului. Vom crea acestea din nou folosind divs, cu clasele "jp-current-time" și "jp-duration". Rețineți că am folosit o altă clasă de span din nou, de data aceasta pentru a crea un alt separator, dar folosind un slash înainte, astfel încât nu vor fi folosite imagini aici. După acel lot, veți vedea că avem un alt separator, la fel ca înainte. Apoi butoanele de volum și bara trebuie să fie făcute. Mai întâi vom crea două butoane, "jp-mute" și "jp-unmute". Doar unul dintre acestea va fi afișat la un moment dat, celălalt va fi ascuns cu jPlayer. Bara de volum are aceleași principii ca bara de progres, aceeași structură (deși diferite nume de clase, evident). Dacă vizualizați fișierul în browser, nu veți mai vedea încă prea multe evenimente. Acum, partea principală, vom adăuga un videoclip! Pentru funcționalitate completă și suport pentru browser încrucișat, veți avea nevoie de videoclipul disponibil în mai multe formate. Formatele media HTML5 acceptate de jPlayer sunt: Diferitele browsere acceptă diferite formate video; formatul corespunzător va fi selectat în funcție de browserul care a fost pus la dispoziție. Check out caniuse.com pentru mai multe informații despre cine, ce și unde. De asemenea, vom avea nevoie de un fișier .png care să funcționeze ca un poster atunci când filmul nu se redă. În scopul acestui tutorial, folosesc un trailer de film descărcat de la http://trailers.apple.com. Apoi l-am convertit în formatele corecte (există o mulțime de resurse online gratuite pentru a vă ajuta aici, Google departe ...) Deci, odată ce le-ați convertit și ați creat posterul .png, plasați-le undeva în proiectul dvs. După aceasta, va trebui să adăugăm un fragment de instanțiere pentru ca jPlayer să funcționeze. Adăugați următoarele la piciorul documentului dvs. amintindu-vă că modificați căile de fișiere pentru a reflecta propriile dvs. Veți vedea că îndreptăm jPlayer spre elementul "# jquery_jplayer_1". Consultați documentația jPlayer pentru mai multe opțiuni și atribute. OK, ar trebui să aveți ceva similar cu acesta: Înainte de a intra în adăugarea unor CSS-uri pentru interfața de control, vom adăuga un fundal, fonturi etc. pe corp, precum și stilurile pentru baza videoclipului. Mergeți mai departe și creați o foaie de stil, amintindu-vă să vă conectați la ea în secțiunea de cap a paginii dvs. Web. De asemenea, am aruncat într-o resetare doar incase browser-ul dvs. decide să adăugați unele marje și nimic! După ce am resetat regulile, am adăugat un fundal cu o imagine. În continuare am vizat întregul jucător (videoclipul și comenzile), i-am dat o familie de fonturi și am adăugat niște umbre în cutie (în timp ce aminteam să folosesc prefixele browserului!). Apoi le-am dat stiluri atunci când jucătorul se află în modul ecran complet. Ar trebui să aveți acum ceva similar cu următorul: Este timpul să începeți să modelați secțiunea de control! Vom face prima parte a părții gri de bază. Vom utiliza o lățime de fluid de 100%, acesta este folosit astfel încât să se extindă la lățime maximă atunci când este în modul ecran complet. De asemenea, am adăugat o înălțime fixă de 35 de pixeli. Apoi vom folosi un gradient pentru fundal, am mers înainte și am creat acest lucru folosind GradientApp și apoi l-am curățat folosind Prefixr API. În cele din urmă, am adăugat o umbră pentru a crea umbrele de inserție, reamintind încă o dată folosirea prefixelor browserului. Apoi am adăugat câteva stiluri pentru suportul de comandă (în esență, un container), permițându-ne să centrăm panoul de control în modul ecran complet. Veți vedea cum funcționează mai târziu. Am folosit o lățime fixă de 570 de pixeli și am centrat-o folosind Nu trebuie să observați prea multe modificări de la ultimul pas, cu excepția fundalului de gradient pe care tocmai l-am adăugat: Apoi vom adăuga butoanele de redare și pauză împreună cu separatorul. Voi folosi un sprite pentru toate butoanele, pe care le puteți apuca în fișierele sursă. Am definit mai întâi o lățime și înălțime pentru butoanele de întrerupere și redare, ambele având aceleași dimensiuni. În continuare, am adăugat o liniuță text pentru a împinge orice text din legăturile de ancorare de pe ecran, deoarece nu avem nevoie de ele, vom folosi imaginea sprite. În cele din urmă vom folosi Bine, în primul rând vom viza baza de barieră de progres. Îi vom da fundal solid, vom adăuga o rază de graniță de 5px (cu prefixele), două umbre în cutie, o umbră de umplere și o umbră de inserție. Apoi vom adăuga unele lățimi și înălțimi, ambele fixate. Apoi vom adăuga un margine de top doar pentru ao centra în întreaga interfață. Apoi vom adăuga câteva stiluri pentru bara de căutare care arată cât de mult a încărcat videoclipul. Vom aplica o lățime de 0px, deoarece jPlayer se va ocupa de lățimea reală dinamic și o înălțime de 100%, astfel încât să moștenească înălțimea barei de progres, umplând-o tot. De asemenea, îi vom da o rază de graniță de 5px și un fundal. În cele din urmă, vom crea bara de progres care se mișcă pe măsură ce se redă videoclipul. Voi folosi o imagine și o voi repeta pe axa y. Încă o dată, așa cum am adăugat anterior, o lățime de 0px și jPlayer se va ocupa de restul. Apoi, amintiți-vă că eticheta span am creat? Acest lucru va fi folosit pentru mâner. Vom folosi și o imagine pentru acest lucru și o vom poziționa absolut. Va trebui să folosim Timpul de a face timp (snigger) Serios, totuși, hai să stil până ora actuală și durata. Îi vom viza pe amândoi să aplice mai întâi unele stiluri pe care le vor împărtăși. Restul este chestii de bază precum marjele. Nu suntem departe de finalizare acum, deci hai să rezolvăm secțiunea de volum. Vom avea nevoie de două butoane, de mut și de sunet. Vom aplica un stil la ambele și apoi la sprite la fiecare individ. Notă am folosit Suntem în ultimul pas! Tot ce am lăsat este butonul complet al ecranului. Folosind pași asemănători ca mai înainte, vom aplica din nou sprite, folosind text-indent pentru a ascunde textul (cunoscut și sub numele de push-it-off-screen). Și amintindu-mă să o folosesc Și playerul nostru video este complet! Continuați și încercați caracteristica ecranului complet, este minunat! Folosind plugin-ul jPlayer și designul încântător al lui Orman, am codificat o interfață video perfectă pentru pixeli. Nu uitați, jPlayer are mai multe trucuri în mânecă, deci asigurați-vă că verificați demo-urile și documentația. Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură.
Pasul 4: Marcarea controlului
pauză de joc
Pasul 5: Adăugarea unui videoclip
Pasul 6: Baza video CSS
html, corp, div, durata, applet, obiect, iframe, H1, H2, H3, H4, H5, H6, p, blockquote, pre, o, abbr, și, adresa, cita, cod, del, DFN, em, img, ins, kbd, q, s, sAMP, mici, grevă, puternic, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, FIELDSET, formă, etichetă, legenda, tabel, legendă, TBODY, TFOOT, dinlicitația, tr, th, TD, articol, o parte, panza, detalii, Încorporați, figura, figcaption, subsol, antet, hgroup, meniu, nav, de ieșire, rubin, secțiune, rezumat, timp, marca, audio, video, de intrare, textarea, selectați background: transparent; de frontieră: 0; font-size: 100%; margin: 0; contur: 0; padding: 0; vertical-align: linia de bază articol, o parte , detalii, figcaption, figura, subsol, antet, hgroup, meniu, nav, sectiune display: block body line-height: 1 abbr [title] ajutor blockquote, q citate: none blockquote: inainte, blockquote: după, q: inainte, q: după content: none del text-decoration: line-through hr background: transparent; frontieră: 0; clar: ambele; culoare: transparent; înălțime: 1px; margin: 0; padding: 0 mark background-color: # ffffb3; font-style: italic intrare, selectați vertical-align: middle ins backgro Culoare: albă; text-decorare: none ol, ul list-style: none tabel border-collapse: marja: 0; padding: 0; fundal: url ("bg.jpg") repeta; .jp-video font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; Poziția: relativă; -webkit-box-shadow: 0px 0px 20px rgba (0,0,0, .3); -moz-box-shadow: 0px 0px 20px rgba (0,0,0, .3); box-shadow: 0px 0px 20px rgba (0,0,0, .3); .jp-video-360p lățime: 570px; margine: 100 pixeli automat; .jp-video-plin lățime: 480px; height: 270px; pozitie: static! important; poziție: relativă .jp-video-plin .jp-jplayer top: 0; stânga: 0; poziție: fix! important; poziție: relativă; / * Reguli pentru IE6 (ecran complet) * / overflow: hidden; z-index: 1000; .jp-video-plin .jp-gui poziție: fix! important; poziție: statică; / * Reguli pentru IE6 (ecran complet) * / top: 0; stânga: 0; lățime: 100%; înălțime: 100%; z-index: 1000; .jp-video-plin .jp-interfață poziție: absolut! important; poziție: relativă; / * Reguli pentru IE6 (ecran complet) * / jos: 0; stânga: 0; z-index: 1000; 
Pasul 7: Styling de control de bază
marja: 0 auto; .jp-interfață poziție: relativă; lățime: 100%; înălțime: 35px; fundal-imagine: -webkit-gradient linear (top, rgb (242, 242, 242), rgb (209, 209, 209)); fundal-imagine: -moz-linear-gradient (top, rgb (242, 242, 242), rgb (209, 209, 209)); fundal-imagine: -o-gradient linear (top, rgb (242, 242, 242), rgb (209, 209, 209)); fundal-imagine: -ms-gradient linear (top, rgb (242, 242, 242), rgb (209, 209, 209)); fundal-imagine: gradient linear (top, rgb (242, 242, 242), rgb (209, 209, 209)); filtru: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f2f2f2', EndColorStr = "# d1d1d1"); -webkit-box-shadow: insetul 0px 1px 0px # f7f7f7, inset 0px -1px 0px # e2e2e2; -moz-box-shadow: inserție 0px 1px 0px # f7f7f7, inset 0px -1px 0px # e2e2e2; box-shadow: inserție 0px 1px 0px # f7f7f7, inset 0px -1px 0px # e2e2e2; div.jp-controls-holder clar: ambele; lățime: 570px; marja: 0 auto; poziție: relativă; overflow: ascuns;
Pasul 8: Butoanele de redare și pauză
schiță: nici una; care va remedia problema când faceți clic, împiedicând unele browsere să afișeze o strălucire albastră oribilă în jurul butonului. a.jp-play, a.jp-pauză lățime: 40px; înălțime: 35px; plutește la stânga; text-liniuță: -9999px; schiță: nici una; a.jp-play fundal: url ("sprite.png") 0 0 nu-repeta; a.jp-pauză background: url ("sprite.png") -40px 0 nu-repeta; afișare: niciunul; . separator fundal-imagine: url ("separator.png"); background-repeat: no-repetare; lățime: 2px; înălțime: 35px; plutește la stânga; margin-top: 7px; margin-dreapta: 10px;
Pasul 9: Bara de progres
dreapta: XXpx; pentru a vă asigura că se mișcă împreună cu bara de redare. .jp-progress fundal: # 706d6d; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inserție 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); -moz-box-shadow: inset 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); box-shadow: inset 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); lățime: 280 pixeli; înălțime: 10px; plutește la stânga; margin-top: 13px; .jp-caută-bar width: 0px; înălțime: 100%; cursor: pointer; .jp-căuta-bg background: # 575555; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; .jp-play-bar fundal: url ("play-bar.png") left repeat-x; lățime: 0px; înălțime: 10px; Poziția: relativă; z-index: 9999; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; .jp-play-bar span poziție: absolută; top: -3px; drept: -12px; fundal: url ("handle.png") centru de repetare; lățime: 16px; înălțime: 17px; 
Pasul 10: Ora curentă / Durata
.jp-curent-timp, .jp-durată font-size: 11px; font-family: Arial; culoare: # 444444; margin-top: 12px; plutește la stânga; .jp-curent-timp float: left; display: inline; .jp-durata float: left; display: inline; text-aliniere: drept; .jp-video .jp-curent-timp margin-left: 10px; .jp-video .jp-durata margin-right: 10px; .time-sep float: left; margine: 13px 3px 0 3px; font-size: 11px; font-family: Arial; culoare: # 444444;
Pasul 11: Butoane de volum și bara
schiță: nici una; din nou pentru a evita acea stare activă problematică. Pentru a crea bara de volum, vom folosi un proces similar cu bara de progres. Vom aplica o lățime și o înălțime fixă, dați-i un fundal, o umbre în cutie și o rază de graniță de 5px. Bara de volum în sine este transparentă, astfel încât nu vom aplica un fundal pentru aceasta. Apoi avem un alt buton; folosind o nouă deschidere vom aplica o imagine de fundal, utilizați Poziția: absolută; și poziționați-o spre dreapta, astfel încât să se miște corect. .jp-video a.jp-mute, .jp-video a.jp-unmute text-indent: -9999px; plutește la stânga; înălțime: 35px; schiță: nici una; .jp-mute float: left; fundal: url (... /images/sprite.png) -80px 0 nu-repeta; margin-top: 1px; margin-stânga: -10px; lățime: 35px; a.jp-unmute fundal: url (... /images/sprite.png) -115px 0 nu-repeta; margin-top: 1px; margin-stânga: -13px; afișare: niciunul; lățime: 38px; .jp-volum-bar float: left; margin-top: 13px; margin-dreapta: 10px; overflow: ascuns; lățime: 70px; înălțime: 10px; cursor: pointer; fundal: # 706d6d; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inserție 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); -moz-box-shadow: inset 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); box-shadow: inset 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); .jp-volume-bar-value fundal: transparent; lățime: 0px; înălțime: 10px; poziție: relativă; .jp-volume-bar-value span poziție: absolut; top: 0px; dreapta: 0px; fundal: url (... /images/volume.png) centru non-repeat; lățime: 11px; înălțime: 10px;
Pasul 12: Buton pe ecran complet
schiță: nici una; din nou (ceea ce ar putea fi aplicat tuturor ancorelor de la începutul foii de stil). .jp-full-screen fundal: url (... /images/sprite.png) -150px 0 nu-repeta; plutește la stânga; lățime: 40px; înălțime: 35px; text-liniuță: -9999px; margin-stânga: -15px; schiță: nici una; .jp-restore-screen fundal: url (... /images/sprite.png) -150px 0 nu-repeta; plutește la stânga; lățime: 40px; înălțime: 35px; text-liniuță: -9999px; margin-stânga: -15px; schiță: nici una;
Concluzie
Accentsconagua