Share
Het is leuk om de Premium Pixel-ontwerpen van Orman Clark te coderen, deze keer kijken we naar zijn videospelerinterface! We zullen het samenstellen met een geweldige HTML5-videobibliotheek genaamd jPlayer, samen met wat HTML en CSS.
We beginnen met het samengooien van een leeg HTML5-document, terwijl we eraan denken om jQuery in de kop te zetten (ik gebruik jQuery gehost door Google). Ik zal ook linken naar de nieuwste HTML-shiv die ervoor zorgt dat Internet Explorer HTML5-elementen correct interpreteert en stijlen.
Een laatste ding, je zult merken dat ik ook een stylesheet heb gekoppeld, we zullen de CSS later in de tutorial toevoegen.
Vervolgens moeten we jPlayer downloaden "The jQuery HTML5 Audio / Video Library". Ga naar jplayer.org en download de huidige release.
Ga je gang en maak een map met de naam "javascript" of "js" (of wat je ook gewend bent) in je webmap en kopieer jquery.jplayer.min.js erin. Vervolgens moet u hiernaar verwijzen in uw HTML, dus voeg het volgende toe in uw sectie (onthouden om het pad naar wens te wijzigen).
We voegen nu de markup toe die we nodig hebben om de speler te maken. Maak je geen zorgen als het overweldigend lijkt, het meeste is afkomstig van demo's op de jplayer.org-site en ik zal later alles uitleggen wat nodig is.
Update vereist Hier is een bericht dat verschijnt als de video niet wordt ondersteund. Hier kun je een Flash-alternatief gebruiken als je er zin in hebt.
Ten eerste ziet u een hoofdcontainer voor alles. We passen daar een aantal globale stijlen op toe. Dan is er de div "# jquery_jplayer_1" die het jPlayer-script zal targeten en waaraan de video moet worden toegevoegd (je zult deze id zien waarnaar wordt verwezen in de jQuery-functie wanneer we die toevoegen).
Je hoeft je alleen maar bezig te houden met wat er in de Nu voor de goede dingen ... Hier hebben we onze bedieningselementen toegevoegd, allemaal met het oog op de duidelijkheid. Om te beginnen, onze afspeelknop gevolgd door de pauzeknop. Deze krijgen allebei de juiste klassenamen voor later stijlen. Vervolgens hebben we een reeks met een klasse van 'scheidingstekens'. Orman heeft een aantal handige kleine scheidingstekens gebruikt in het ontwerp, omdat deze scheidingstekens zijn met een verloop erop, we gebruiken hiervoor een afbeelding (maar gebruik gerust CSS3-verlopen als u zeker bent). Vervolgens maken we de voortgangsbalk en er zijn een paar elementen die dit gaan bouwen. Eerst hebben we 'jp-progress' wat de basis is van de voortgangsbalk. Vervolgens hebben we 'jp-play-bar'. Dit is de koele rode balk die over de voortgang van de video schuift. Merk op dat we hier ook een reeks gebruiken met een klasse 'handvat' om de kleine knop te maken die in het ontwerp wordt getoond. Nu voor de huidige tijd en duur van de video. We zullen deze opnieuw maken met behulp van divs, met de klassen 'jp-current-time' en 'jp-duration'. We hebben ook weer een andere bereikklasse gebruikt, deze keer om een ander scheidingsteken te maken, maar een schuine streep naar voren te gebruiken, dus hier worden geen afbeeldingen gebruikt. Na dat lot zie je dat we nog een scheidingsteken hebben, hetzelfde als eerder. De volumeknoppen en de balk moeten dan worden gemaakt. Eerst maken we twee knoppen, 'jp-mute' en 'jp-unmute'. Slechts een van deze wordt tegelijkertijd weergegeven, de andere wordt verborgen met jPlayer. De volumebalk heeft dezelfde principes als de voortgangsbalk, dezelfde structuur (uiteraard met verschillende klassenamen). Als je het bestand in de browser bekijkt, zie je nog niet zoveel. Nu het belangrijkste deel, zullen we een video toevoegen! Voor volledige functionaliteit en ondersteuning voor meerdere browsers heeft u uw video in meerdere indelingen nodig. HTML5-media-indelingen die worden ondersteund door jPlayer zijn: Verschillende browsers ondersteunen verschillende videoformaten; het relevante formaat wordt geselecteerd, afhankelijk van de browser op voorwaarde dat deze beschikbaar is gemaakt. Kijk op caniuse.com voor meer informatie over wie, wat en waar. We hebben ook een .png-bestand nodig dat fungeert als een poster voor wanneer de film niet wordt afgespeeld. Voor deze tutorial gebruik ik een filmtrailer gedownload van http://trailers.apple.com. Ik heb het vervolgens geconverteerd naar de juiste indelingen (er zijn voldoende gratis online bronnen om je hier te helpen, Google weg ...) Dus als je ze eenmaal hebt geconverteerd en je .png-poster hebt gemaakt, plaats ze dan ergens in je project. Hierna moeten we een instantiatiefragment toevoegen om jPlayer actief te krijgen. Voeg het volgende toe aan de voet van uw document en onthoud dat u de bestandspaden moet wijzigen zodat deze overeenkomen met die van uw document. Je zult zien dat we jPlayer naar het element "# jquery_jplayer_1" wijzen. Bekijk de jPlayer-documentatie voor meer opties en kenmerken. OK, je zou iets dergelijks moeten hebben als: Voordat we wat CSS gaan toevoegen voor de besturingsinterface, zullen we een achtergrond, lettertypen enz. Toevoegen aan de body en ook de stijlen voor de basis van de video. Ga je gang en maak een stylesheet, onthoud dat je ernaar moet linken in het head-gedeelte van je webpagina. Ik heb ook een reset geworpen, alleen als uw browser besluit om wat marges toe te voegen en wat dan ook! Na de reset-regels heb ik een achtergrond met een afbeelding toegevoegd. Vervolgens heb ik de hele speler (de video en besturingselementen) getarget, ik heb het een lettertypefamilie gegeven en enkele doosschaduwen toegevoegd (terwijl ik me herinnerde de voorvoegsels van de browser te gebruiken!). We hebben het stijlen gegeven voor wanneer de speler in de modus Volledig scherm staat. U zou nu iets moeten hebben dat lijkt op het volgende: Tijd om te beginnen met het opmaken van het bedieningsgedeelte! We zullen eerst het grijze basisgedeelte stijlen. We gebruiken een fluïdumbreedte van 100%, deze wordt gebruikt zodat deze over de volledige breedte wordt uitgerekt in de modus Volledig scherm. Ik heb ook een vaste hoogte van 35px toegevoegd. Vervolgens gebruiken we een verloop voor de achtergrond, ik ging door en maakte dit met behulp van GradientApp en maakte het vervolgens op met de Prefixr API. Eindelijk heb ik een vakschaduw toegevoegd om de inzetschaduwen te maken, waarbij ik me opnieuw de voorvoegsels van de browser moest herinneren. Ik heb vervolgens een aantal stijlen toegevoegd voor de houder van de bedieningselementen (in feite een container), waardoor we het bedieningspaneel kunnen centreren in de modus Volledig scherm. Je zult later zien hoe dit werkt. Ik heb een vaste breedte van 570 px gebruikt en gecentreerd met Je zou niet veel veranderingen moeten zien sinds de laatste stap behalve de verloop achtergrond die we zojuist hebben toegevoegd: Vervolgens voegen we de afspeel- en pauzeknoppen samen met het scheidingsteken toe. Ik zal een sprite gebruiken voor alle knoppen, die je in de bronbestanden kunt pakken. Ik heb eerst een breedte en hoogte gedefinieerd voor zowel de pauze- als de afspeelknoppen, ze hebben allebei dezelfde afmetingen. Vervolgens heb ik een tekst-inspringing toegevoegd om alle tekst in de ankerschakels van het scherm te duwen omdat we ze niet nodig hebben, we zullen de sprite-afbeelding gebruiken. Eindelijk zullen we gebruiken Oké, eerst richten we ons op de voortgangsbalk. We zullen het een solide achtergrond geven, een randradius toevoegen van 5 px (met de voorvoegsels), twee doosschaduwen, een slagschaduw en een inzetschaduw. Vervolgens voegen we enkele breedten en hoogtes toe, beide gefixeerd. We voegen dan wat marge toe om het in de hele interface te centreren. Vervolgens voegen we enkele stijlen toe voor de zoekbalk die laat zien hoeveel de video heeft geladen. We zullen een breedte van 0px toepassen, omdat jPlayer de werkelijke breedte dynamisch verwerkt, en een hoogte van 100%, zodat het de voortgangsbalkhoogte zal erven, alles vullend. We geven het ook de grensradius van 5 px en een achtergrond. Ten slotte maken we de voortgangsbalk die wordt verplaatst terwijl de video wordt afgespeeld. Ik gebruik een afbeelding en herhaal dit op de y-as. Nogmaals, zoals eerder zullen we een breedte van 0px toevoegen en jPlayer zal de rest afhandelen. Onthoud vervolgens die span-tag die we hebben gemaakt? Dit wordt gebruikt voor het handvat. We zullen hiervoor ook een afbeelding gebruiken en deze absoluut positioneren. We zullen moeten gebruiken Tijd om tijd te maken (snikger) Maar laten we de huidige tijd en duur serieus opmaken. We richten ze eerst allebei om enkele stijlen toe te passen die ze zullen delen. De rest is basismateriaal zoals marges. We zijn nu nog lang niet klaar, dus laten we het volumegedeelte afhandelen. We hebben twee knoppen nodig, het dempen en het dempen opheffen. We zullen wat styling toepassen op beide en vervolgens de sprite op elk afzonderlijk. Let op dat we hebben gebruikt We zijn nu in de laatste stap! Het enige dat we nog over hebben is de knop op het volledige scherm. Met dezelfde stappen als hiervoor passen we de sprite opnieuw toe, gebruik tekst-inspringing om de tekst te verbergen (ook bekend als push-it-off-the-screen). En onthouden om te gebruiken En onze videospeler is voltooid! Ga je gang en probeer het volledige scherm, het is geweldig! Door de jPlayer-plug-in en het prachtige ontwerp van Orman te gebruiken, hebben we een pixel-perfecte videospeler-interface gecodeerd. Vergeet niet dat jPlayer nog veel meer trucs in petto heeft, dus zorg ervoor dat je de demo's en documentatie eens bekijkt. Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen.
Stap 4: regelt het markeren
speel pauze
Stap 5: een video toevoegen
Stap 6: Video Base CSS
html, body, div, overspanning, applet, object, iframe, H1, H2, H3, H4, h5, h6, p, blockquote, pre, a, abbr, en, adres, citeren, code, del, DFN, em, img, ins, kbd, q, s, samp, kleine, staking, sterke, sub, sup, tt, var, b, U, I, dl, dt, dd, ol, ul, li, fieldset, vorm, etiket, legende, tafel, het bijschrift tbody, tfoot, thead, tr, th, td, artikel, opzij, canvas, details, embed, figuur, figcaption, footer, header, hgroup, menu, nav, output, robijn, sectie, samenvatting, tijd, mark, audio, video, input, textarea, select background: transparent; border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: basislijn artikel, afgezien , details, figcaption, figuur, footer, header, hgroup, menu, nav, sectie display: block body line-height: 1 abbr [title], dfn [title] border-bottom: 1px dotted; cursor: help blockquote, q citaten: none blockquote: voor, blockquote: na, q: vóór, q: na inhoud: none del text-decoration: lijn-through uur background: transparent; border: 0; clear: both; color: transparent; height: 1px; margin: 0; padding: 0 mark background-color: # ffffb3; font-style: italic input, selecteert u vertical-align: middle ins backgro und-color: rood; kleur: wit; tekst-decoratie: geen ol, ul lijst-stijl: geen tabel border-collapse: collapse; border-spacing: 0 a text-decoration: none; body marge: 0; padding: 0; achtergrond: url ("bg.jpg") herhalen; .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 width: 570px; marge: 100px auto; .jp-video-full width: 480px; Hoogte: 270px; positie: statisch! belangrijk; positie: relatief .jp-video-full .jp-jplayer top: 0; links: 0; positie: vast! belangrijk; positie: relatief; / * Regels voor IE6 (volledig scherm) * / overloop: verborgen; z-index: 1000; .jp-video-full .jp-gui positie: vast! belangrijk; positie: statisch; / * Regels voor IE6 (volledig scherm) * / top: 0; links: 0; Breedte: 100%; height: 100%; z-index: 1000; .jp-video-volledige .jp-interface positie: absoluut! belangrijk; positie: relatief; / * Regels voor IE6 (volledig scherm) * / onder: 0; links: 0; z-index: 1000; 
Stap 7: Basisbediening Styling
marge: 0 auto; .jp-interface positie: relatief; Breedte: 100%; hoogte: 35 px; achtergrondafbeelding: -webkit-lineaire gradiënt (boven, rgb (242, 242, 242), rgb (209, 209, 209)); achtergrondafbeelding: -moz-lineaire gradiënt (top, rgb (242, 242, 242), rgb (209, 209, 209)); achtergrondafbeelding: -o-lineaire gradiënt (bovenste, rgb (242, 242, 242), rgb (209, 209, 209)); achtergrondafbeelding: -ms-lineaire gradiënt (top, rgb (242, 242, 242), rgb (209, 209, 209)); achtergrondafbeelding: lineaire gradiënt (boven, rgb (242, 242, 242), rgb (209, 209, 209)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f2f2f2', EndColorStr = "# d1d1d1"); -webkit-vak-schaduw: inzet 0px 1px 0px # f7f7f7, inzet 0px -1px 0px # e2e2e2; -moz-box-shadow: inzet 0px 1px 0px # f7f7f7, inzet 0px -1px 0px # e2e2e2; vakschaduw: inzet 0px 1px 0px # f7f7f7, inzet 0px -1px 0px # e2e2e2; div.jp-controls-holder clear: beide; width: 570px; marge: 0 auto; positie: relatief; overloop verborgen;
Stap 8: Knoppen Afspelen en Pauzeren
schetsen: none; die een probleem zal oplossen bij het klikken, waardoor sommige browsers een vreselijke blauwe gloed rondom de knop laten zien. a.jp-play, a.jp-pause width: 40px; hoogte: 35px; float: left; text-indent: -9999px; schetsen: none; a.jp-play background: url ("sprite.png") 0 0 niet herhaald; a.jp-pause background: url ("sprite.png") -40px 0 niet-herhalen; Geen weergeven; .separator background-image: url ("separator.png"); background-repeat: no-repeat; breedte: 2px; hoogte: 35 px; float: left; margin-top: 7px; margin-right: 10px;
Stap 9: voortgangsbalk
rechts: XXpx; om ervoor te zorgen dat het meebeweegt met de speelbalk. .jp-progress background: # 706d6d; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-vak-schaduw: inzet 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, 0,4); -moz-box-shadow: inzet 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, 0,4); box-shadow: inzet 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, 0,4); width: 280px; hoogte: 10px; float: left; margin-top: 13px; .jp-seek-bar width: 0px; height: 100%; cursor: pointer; .jp-seeking-bg background: # 575555; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; .jp-play-bar background: url ("play-bar.png") links repeat-x; width: 0px; hoogte: 10px; position: relative; z-index: 9999; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; .jp-play-bar span position: absoluut; top: -3px; rechts: -12px; achtergrond: url ("handle.png") no-repeat center; breedte: 16 px; hoogte: 17px; 
Stap 10: Huidige tijd / duur
.jp-current-time, .jp-duration font-size: 11px; font-family: Arial; color: # 444444; margin-top: 12px; float: left; .jp-huidige-tijd float: left; weergave: inline; .jp-duration float: left; weergave: inline; text-align: right; .jp-video .jp-huidige-tijd margin-left: 10px; .jp-video .jp-duration margin-right: 10px; .time-sep float: left; marge: 13px 3px 0 3px; font-size: 11px; font-family: Arial; color: # 444444;
Stap 11: Volumeknoppen en balk
schetsen: none; om deze problematische actieve toestand te vermijden. Om de volumebalk te maken, gebruiken we een vergelijkbaar proces als de voortgangsbalk. We passen een vaste breedte en hoogte toe, geven het een achtergrond, sommige doosschaduwen en een randradius van 5 px. De volumebalk zelf is transparant, dus we zullen er geen achtergrond op toepassen. Vervolgens hebben we nog een knop; opnieuw een span gebruikend zullen we een achtergrondafbeelding toepassen positie: absoluut; en plaats het naar rechts zodat het correct beweegt. .jp-video a.jp-mute, .jp-video a.jp-unmute text-indent: -9999px; float: left; hoogte: 35 px; schetsen: none; .jp-mute float: links; achtergrond: url (... /images/sprite.png) -80px 0 niet herhaald; margin-top: 1px; margin-left: -10px; breedte: 35px; a.jp-unmute background: url (... /images/sprite.png) -115px 0 niet herhaald; margin-top: 1px; marge links: -13px; Geen weergeven; breedte: 38px; .jp-volume-bar float: left; margin-top: 13px; margin-right: 10px; overloop verborgen; Breedte: 70 pixels; hoogte: 10px; cursor: pointer; achtergrond: # 706d6d; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-vak-schaduw: inzet 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, 0,4); -moz-box-shadow: inzet 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, 0,4); box-shadow: inzet 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, 0,4); .jp-volume-bar-waarde background: transparent; width: 0px; hoogte: 10px; positie: relatief; .jp-volume-bar-waarde span position: absoluut; top: 0px; rechts: 0px; achtergrond: url (... /images/volume.png) no-repeat center; breedte: 11 px; hoogte: 10 px;
Stap 12: Knop voor volledig scherm
schetsen: none; opnieuw (wat weliswaar zou kunnen worden toegepast op alle ankers aan het begin van het stylesheet). .jp-full-screen background: url (... /images/sprite.png) -150px 0 geen herhaling; float: left; breedte: 40px; hoogte: 35 px; text-indent: -9999px; marge links: -15px; schetsen: none; .jp-restore-screen background: url (... /images/sprite.png) -150px 0 geen herhaling; float: left; breedte: 40px; hoogte: 35 px; text-indent: -9999px; marge links: -15px; schetsen: none;
Conclusie
Accentsconagua