Share
La codifica dei progetti Premium Pixel di Orman Clark è molto divertente, questa volta daremo un'occhiata alla sua interfaccia Video Player! Lo costruiremo utilizzando una fantastica libreria video HTML5 chiamata jPlayer insieme ad HTML e CSS.
Inizieremo lanciando un documento HTML5 vuoto, ricordando di cercare jQuery in testa (sto usando jQuery ospitato da Google). Collegherò anche all'ultimo shiv HTML che assicurerà che Internet Explorer interpreti e stili gli elementi HTML5 correttamente.
Un'ultima cosa, noterai che anch'io sono collegato a un foglio di stile, in seguito aggiungeremo il CSS nel tutorial.
Successivamente dovremo scaricare jPlayer "La libreria audio / video jQuery HTML5". Vai su jplayer.org e scarica la versione corrente.
Vai avanti e crea una cartella denominata "javascript" o "js" (o qualsiasi altra cosa tu sia abituato) nella tua cartella web e copia jquery.jplayer.min.js dentro. Successivamente dovrai collegarti a questo nel tuo codice HTML, quindi aggiungi quanto segue al tuo sezione (ricordando di cambiare il percorso come appropriato).
Ora aggiungeremo il markup di cui abbiamo bisogno per creare il giocatore. Non preoccuparti se sembra travolgente, la maggior parte di questo è preso da demo sul sito jplayer.org e ti spiegherò tutto ciò che è necessario in seguito.
Aggiornamento richiesto Ecco un messaggio che verrà visualizzato se il video non è supportato. Un'alternativa Flash può essere utilizzata qui se lo desideri.
In primo luogo, vedrai un contenitore principale per tutto. Applicheremo alcuni stili globali a questo. Poi c'è il div "# jquery_jplayer_1" che lo script jPlayer sceglierà come target e aggiungerà il video (vedrai questo id referenziato nella funzione jQuery quando aggiungiamo che).
Devi solo preoccuparti di ciò che è dentro Ora per le cose buone ... Qui abbiamo aggiunto i nostri controlli, tutti commentati per chiarezza. Per iniziare, il nostro pulsante di riproduzione seguito dal pulsante di pausa. Questi sono entrambi dotati di nomi di classe adatti per lo styling in seguito. Successivamente, abbiamo un intervallo con una classe di 'separator'. Orman ha usato alcuni piccoli separatori nel design, poiché questi sono separatori con un gradiente su di essi useremo un'immagine per questi (anche se sei libero di usare i gradienti CSS3 se sei sicuro). Quindi creiamo la barra di avanzamento e ci sono alcuni elementi che entrano nella costruzione di questo. Per prima cosa abbiamo 'jp-progress' che è la base della barra di avanzamento. Quindi abbiamo 'jp-play-bar'. Questa è la bella barra rossa che scorre attraverso il progresso del video. Nota anche noi usiamo una span con una classe di 'handle' qui per creare la piccola manopola mostrata nel disegno. Ora per l'ora e la durata attuali del video. Li creeremo ancora usando le div, con le classi 'jp-current-time' e 'jp-duration'. Nota abbiamo anche usato un'altra classe span, questa volta per creare un altro separatore ma usando una barra diretta in modo che qui non vengano usate immagini. Dopo quel lotto vedrai che abbiamo un altro separatore, come in precedenza. Quindi è necessario creare i pulsanti del volume e la barra. Per prima cosa creeremo due pulsanti, 'jp-mute' e 'jp-unmute'. Solo uno di questi sarà visualizzato alla volta, l'altro sarà nascosto con jPlayer. La barra del volume ha gli stessi principi della barra di avanzamento, stessa struttura (anche se nomi di classi diversi, ovviamente). Se si visualizza il file nel browser, non si vedrà ancora troppo accadere. Ora la parte principale, aggiungeremo un video! Per la piena funzionalità e il supporto cross-browser avrai bisogno del tuo video disponibile in più formati. I formati multimediali HTML5 supportati da jPlayer sono: Diversi browser supportano diversi formati video; il formato rilevante verrà selezionato in base al browser, a condizione che sia stato reso disponibile. Dai un'occhiata a caniuse.com per maggiori informazioni su chi, cosa e dove. Avremo anche bisogno di un file .png che funge da poster per quando il film non è in riproduzione. Ai fini di questo tutorial sto utilizzando un trailer del film scaricato da http://trailers.apple.com. Poi l'ho convertito nei formati corretti (ci sono un sacco di risorse online gratuite per aiutarti, Google lontano ...) Quindi una volta convertiti e creato il tuo poster .png, posizionali in un posto appropriato nel tuo progetto. Dopodiché sarà necessario aggiungere uno snippet di istanza per ottenere jPlayer attivo e funzionante. Aggiungi quanto segue al piede del tuo documento ricordando di cambiare i percorsi dei file per riflettere il tuo. Vedrai che stiamo puntando jPlayer all'elemento "# jquery_jplayer_1". Controlla la documentazione di jPlayer per ulteriori opzioni e attributi. OK, dovresti avere qualcosa di simile a questo: Prima di aggiungere alcuni CSS per l'interfaccia di controllo aggiungeremo uno sfondo, i caratteri ecc. Al corpo e anche gli stili per la base del video. Vai avanti e crea un foglio di stile, ricordandoti di collegarlo ad esso nella sezione principale della tua pagina web. Ho anche inserito un reset solo nel caso in cui il tuo browser decida di aggiungere alcuni margini e quant'altro! Dopo le regole di reset ho aggiunto uno sfondo con un'immagine. Successivamente ho preso di mira l'intero player (il video e i controlli), gli ho dato una famiglia di font e ho aggiunto alcune ombre (mentre ricordavo di usare i prefissi del browser!). Gli abbiamo quindi assegnato degli stili per quando il giocatore è in modalità a schermo intero. Ora dovresti avere qualcosa di simile al seguente: È ora di iniziare a disegnare la sezione dei controlli! Per prima cosa modificheremo la parte grigia di base. Useremo una larghezza del fluido del 100%, questo è usato in modo che si estenda a tutta larghezza quando è in modalità a schermo intero. Ho anche aggiunto un'altezza fissa di 35 px. Successivamente utilizzeremo una sfumatura per lo sfondo, sono andato avanti e ho creato questo usando GradientApp e poi ripulito usando l'API Prefixr. Infine ho aggiunto un box-shadow per creare le ombre inset, ricordando ancora una volta di usare i prefissi del browser. Ho poi aggiunto alcuni stili per il titolare dei controlli (fondamentalmente un contenitore), permettendoci di centrare il pannello di controllo quando si è in modalità a schermo intero. Vedrai come funziona più tardi. Ho usato una larghezza fissa di 570px e centrato usando Non dovresti notare molti cambiamenti dall'ultimo passaggio ad eccezione dello sfondo sfumato che abbiamo appena aggiunto: Successivamente aggiungeremo i pulsanti play e pause, insieme al separatore. Userò uno sprite per tutti i pulsanti, che puoi prendere nei file sorgente. Per prima cosa ho definito una larghezza e un'altezza per i pulsanti di pausa e di riproduzione, entrambi avranno le stesse dimensioni. Successivamente ho aggiunto un indent di testo per spingere qualsiasi testo all'interno dei link di ancoraggio dallo schermo in quanto non ne abbiamo bisogno, useremo l'immagine sprite. Finalmente lo useremo Ok, per prima cosa prenderemo di mira la base della barra di avanzamento. Daremo uno sfondo uniforme, aggiungiamo un raggio di 5px (con i prefissi), due ombre di riquadri, un'ombra esterna e un'ombra inserita. Successivamente aggiungeremo alcune larghezze e altezze, entrambe fisse. Aggiungeremo quindi un margine marginale solo per centrarlo nell'intera interfaccia. Successivamente aggiungeremo alcuni stili per la barra di ricerca che mostra quanto il video è stato caricato. Applicheremo una larghezza di 0px perché jPlayer gestirà la larghezza effettiva in modo dinamico e un'altezza del 100% in modo che erediti l'altezza della barra di avanzamento, riempiendo tutto. Daremo anche il raggio di confine di 5px e uno sfondo. Infine creeremo la barra di avanzamento che si muove mentre il video viene riprodotto. Userò un'immagine e la ripeterò sull'asse y. Ancora una volta, come in precedenza aggiungeremo una larghezza di 0px e jPlayer gestirà il resto. Quindi, ricorda che tag span abbiamo creato? Questo sarà usato per la maniglia. Useremo anche un'immagine per questo e la posizioneremo assolutamente. Dovremo usare Tempo per fare tempo (ridacchiando) Seriamente, però, modelliamo l'ora e la durata attuali. Li prenderemo come prima cosa entrambi per applicare alcuni stili che condivideranno. Il resto è roba di base come i margini. Non siamo lontani dal completamento ora, quindi gestiamo la sezione del volume. Avremo bisogno di due pulsanti, l'audio e l'audio. Applicheremo alcuni stili a entrambi e quindi lo sprite a ciascuno individualmente. Nota che abbiamo usato Siamo sull'ultimo passo ora! Tutto quello che ci rimane è il pulsante a schermo intero. Usando simili passi come prima, applicheremo di nuovo lo sprite, useremo il text-indent per nascondere il testo (noto anche come push-it-off-the-screen). E ricordando di usare E il nostro lettore video è completo! Vai avanti e prova la funzionalità a schermo intero, è fantastico! Utilizzando il plugin jPlayer e il delizioso design di Orman, abbiamo codificato un'interfaccia per lettore video pixel perfetta. Non dimenticare, jPlayer ha molti altri trucchi nella manica, quindi assicurati di controllare le demo e la documentazione. Spero che questo tutorial ti sia piaciuto, grazie per la lettura.
Passaggio 4: controlla il markup
play pausa
Passaggio 5: aggiunta di un video
Passaggio 6: CSS di base video
html, body, div, arco, applet, oggetto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, e, indirizzo, citare, codice, del, DFN, em, img, ins, KBD, q, s, SAMP, piccolo, esercizio, forte, sub, sup, TT, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, forma, etichetta, legenda, tavolo, didascalia, tbody, tfoot, thead, TR, th, td, articolo, a parte, tela, dettagli, incorporare, figura, figcaption, piè, intestazione, hgroup, menu, navigazione, uscita, rubino, sezione, sintesi, tempo, mark, audio, video, ingresso, textarea, selezionare background: trasparente; border: 0; font-size: 100%; margin: 0; muta: 0; padding: 0; vertical-align: baseline articolo, parte , dettagli, figcaption, figure, footer, header, hgroup, menu, nav, section display: block body line-height: 1 abbr [titolo], dfn [titolo] border-bottom: 1px punteggiato; cursore: help blockquote, q citazioni: none blockquote: prima, blockquote: dopo, q: prima, q: after content: none del text-decoration: line-attraverso hr background: transparent; border: 0; clear: both; colore: trasparente, altezza: 1px; margin: 0; padding: 0 mark background-color: # ffffb3; font-style: italic ingresso, selezionare vertical-align: middle ins backgro und-color: red; color: white; text-decoration: none ol, ul list-style: none table border-collapse: collapse; border-spacing: 0 a text-decoration: none; body margine: 0; padding: 0; background: url ("bg.jpg") ripetizione; .jp-video font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; -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 larghezza: 570px; margine: 100px auto; .jp-video-full width: 480px; altezza: 270px; posizione: statica! importante; position: relativo .jp-video-full .jp-jplayer top: 0; a sinistra: 0; posizione: fissa! importante; posizione: relativa; / * Regole per IE6 (schermo intero) * / overflow: nascosto; z-index: 1000; .jp-video-full .jp-gui position: fixed! important; posizione: statica; / * Regole per IE6 (schermo intero) * / top: 0; a sinistra: 0; width: 100%; height: 100%; z-index: 1000; .jp-video-full .jp-interface position: absolute! important; posizione: relativa; / * Regole per IE6 (schermo intero) * / inferiore: 0; a sinistra: 0; z-index: 1000; 
Step 7: Styling dei controlli di base
margine: 0 auto; .interfaccia jp posizione: relativa; width: 100%; altezza: 35px; background-image: -webkit-linear-gradient (in alto, rgb (242, 242, 242), rgb (209, 209, 209)); background-image: -moz-linear-gradient (in alto, rgb (242, 242, 242), rgb (209, 209, 209)); background-image: -o-linear-gradient (in alto, rgb (242, 242, 242), rgb (209, 209, 209)); background-image: -ms-linear-gradient (in alto, rgb (242, 242, 242), rgb (209, 209, 209)); background-image: linear-gradient (top, rgb (242, 242, 242), rgb (209, 209, 209)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f2f2f2', EndColorStr = "# d1d1d1"); -webkit-box-shadow: inset 0px 1px 0px # f7f7f7, inset 0px -1px 0px # e2e2e2; -moz-box-shadow: inset 0px 1px 0px # f7f7f7, inset 0px -1px 0px # e2e2e2; box-shadow: inset 0px 1px 0px # f7f7f7, inset 0px -1px 0px # e2e2e2; div.jp-controls-holder clear: both; larghezza: 570px; margine: 0 auto; posizione: relativa; overflow: hidden;
Passaggio 8: Riproduci e mette in pausa i pulsanti
delineare: none; che risolverà un problema quando si fa clic, impedendo ad alcuni browser di mostrare un orribile bagliore blu attorno al pulsante. a.jp-play, a.jp-pause width: 40px; altezza: 35px; float: sinistra; text-trattino: -9999px; delineare: none; a.jp-play background: url ("sprite.png") 0 0 nessuna ripetizione; a.jp-pause background: url ("sprite.png") -40px 0 nessuna ripetizione; display: nessuno; .separator background-image: url ("separator.png"); background-repeat: no-repeat; larghezza: 2px; altezza: 35px; float: sinistra; margin-top: 7px; margin-right: 10px;
Passaggio 9: barra di avanzamento
destra: XXpx; per assicurarsi che si sposti con la barra di riproduzione. .jp-progress background: # 706d6d; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 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); larghezza: 280px; altezza: 10px; float: sinistra; margin-top: 13px; .jp-seek-bar width: 0px; height: 100%; cursore: puntatore; .jp-seeking-bg background: # 575555; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; .jp-play-bar background: url ("play-bar.png") left repeat-x; larghezza: 0px; altezza: 10px; position: relative; z-index: 9999; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; .jp-play-bar span position: absolute; inizio: -3px; a destra: -12px; background: url ("handle.png") centro senza ripetizione; larghezza: 16px; altezza: 17px; 
Passaggio 10: Tempo / durata attuali
.jp-current-time, .jp-duration font-size: 11px; font-family: Arial; color: # 444444; margin-top: 12px; float: sinistra; .jp-current-time float: left; display: inline; .jp-duration float: left; display: inline; allineamento del testo: giusto; .jp-video .jp-current-time margin-left: 10px; .jp-video .jp-duration margin-right: 10px; .time-sep float: left; margine: 13px 3px 0 3px; font-size: 11px; font-family: Arial; color: # 444444;
Passaggio 11: Pulsanti e barra del volume
delineare: none; di nuovo per evitare questo stato attivo problematico. Per creare la barra del volume useremo un processo simile alla barra di avanzamento. Applicheremo una larghezza e un'altezza fisse, forniremo uno sfondo, alcune ombre di riquadri e un raggio di 5px. La barra del volume è trasparente, quindi non applicheremo uno sfondo. Quindi abbiamo un'altra manopola; utilizzando nuovamente lo span applicheremo un'immagine di sfondo, usiamo position: absolute; e posizionarlo a destra in modo che si sposti correttamente. .jp-video a.jp-mute, .jp-video a.jp-unmute text-indent: -9999px; float: sinistra; altezza: 35px; delineare: none; .jp-mute float: left; background: url (... /images/sprite.png) -80px 0 nessuna ripetizione; margin-top: 1px; margin-left: -10px; larghezza: 35px; a.jp-unmute background: url (... /images/sprite.png) -115px 0 nessuna ripetizione; margin-top: 1px; margin-left: -13px; display: nessuno; larghezza: 38 px; .jp-volume-bar float: left; margin-top: 13px; margin-right: 10px; overflow: hidden; larghezza: 70px; altezza: 10px; cursore: puntatore; sfondo: # 706d6d; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 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 background: transparent; larghezza: 0px; altezza: 10px; posizione: relativa; .jp-volume-bar-value span position: absolute; inizio: 0px; a destra: 0px; background: url (... /images/volume.png) centro di non ripetizione; larghezza: 11px; altezza: 10px;
Passaggio 12: Pulsante a schermo intero
delineare: none; di nuovo (che potrebbe essere applicato a tutti gli ancoraggi all'inizio del foglio di stile). .jp-full-screen background: url (... /images/sprite.png) -150px 0 nessuna ripetizione; float: sinistra; larghezza: 40px; altezza: 35px; text-trattino: -9999px; margin-left: -15px; delineare: none; .jp-restore-screen background: url (... /images/sprite.png) -150px 0 nessuna ripetizione; float: sinistra; larghezza: 40px; altezza: 35px; text-trattino: -9999px; margin-left: -15px; delineare: none;
Conclusione
Accentsconagua