Share
Das Kodieren der Premium Pixel-Designs von Orman Clark macht großen Spaß, diesmal werfen wir einen Blick auf seine Video-Player-Oberfläche! Wir werden es mit einer fantastischen HTML5-Videobibliothek namens jPlayer zusammen mit etwas HTML und CSS erstellen.
Wir fangen damit an, ein leeres HTML5-Dokument zusammenzuwerfen, während wir daran denken, jQuery im Kopf zu speichern (ich verwende jQuery, das von Google gehostet wird). Ich werde auch auf den neuesten HTML-Link verlinken, der sicherstellt, dass Internet Explorer HTML5-Elemente korrekt interpretiert und formatiert.
Eine letzte Sache, Sie werden feststellen, dass ich auch mit einem Stylesheet verlinkt habe. Wir werden das CSS später im Tutorial hinzufügen.
Als nächstes müssen wir jPlayer "The jQuery HTML5 Audio / Video Library" herunterladen. Gehen Sie zu jplayer.org und laden Sie die aktuelle Version herunter.
Erstellen Sie in Ihrem Webordner einen Ordner mit dem Namen "javascript" oder "js" (oder was auch immer Sie gewohnt sind) und kopieren Sie ihn jquery.jplayer.min.js hinein. Als Nächstes müssen Sie in Ihrem HTML-Code darauf verweisen. Fügen Sie also Folgendes hinzu Abschnitt (Denken Sie daran, den Pfad entsprechend zu ändern).
Jetzt fügen wir das Markup hinzu, das wir zum Erstellen des Players benötigen. Machen Sie sich keine Sorgen, wenn es überwältigend erscheint. Das meiste davon stammt von den Demos auf der Website jplayer.org. Ich erkläre Ihnen später alles Notwendige.
Aktualisierung erforderlich Hier eine Meldung, die angezeigt wird, wenn das Video nicht unterstützt wird. Eine Flash-Alternative kann hier verwendet werden, wenn Sie Lust haben.
Zunächst sehen Sie einen Hauptcontainer für alles. Wir werden einige globale Stile darauf anwenden. Dann gibt es noch das div "# jquery_jplayer_1", auf das das jPlayer-Skript abzielt, und fügen Sie das Video hinzu. (Diese ID wird in der jQuery-Funktion referenziert, wenn Sie das hinzufügen.).
Sie müssen sich wirklich nur mit dem beschäftigen, was sich im Inneren befindet Nun zu den guten Sachen… Hier haben wir unsere Steuerelemente hinzugefügt, die alle zur Klarheit kommentiert wurden. Zum Starten unserer Play-Taste folgt die Pausetaste. Beide erhalten geeignete Klassennamen für das spätere Styling. Als nächstes haben wir eine Spanne mit einer Klasse von 'Trennzeichen'. Orman verwendete ein paar nette kleine Trennzeichen im Design, da diese Trennzeichen mit einem Farbverlauf sind, werden wir ein Bild dafür verwenden (obwohl Sie sicher sind, CSS3-Farbverläufe zu verwenden, wenn Sie sicher sind). Als Nächstes erstellen wir den Fortschrittsbalken und es gibt einige Elemente, die dazu beitragen, diese zu erstellen. Zuerst haben wir 'jp-progress', der Basis der Fortschrittsleiste. Als nächstes haben wir 'jp-play-bar'. Dies ist der coole rote Balken, über den der Fortschritt des Videos angezeigt wird. Beachten Sie, dass wir hier auch einen Bereich mit einer Klasse von 'Griff' verwenden, um den im Design dargestellten kleinen Knopf zu erzeugen. Nun zur aktuellen Uhrzeit und Dauer des Videos. Diese werden wir erneut mit divs erstellen, mit den Klassen 'jp-current-time' und 'jp-duration'. Beachten Sie, dass wir auch wieder eine andere Span-Klasse verwendet haben, diesmal um ein anderes Trennzeichen zu erstellen, jedoch einen Schrägstrich, damit hier keine Bilder verwendet werden. Nach diesem Los werden Sie sehen, dass wir ein anderes Trennzeichen haben, genauso wie zuvor. Die Lautstärketasten und die Leiste müssen dann erstellt werden. Zuerst erstellen wir zwei Buttons, 'jp-mute' und 'jp-unmute'. Es wird immer nur einer angezeigt, der andere wird mit jPlayer ausgeblendet. Der Lautstärkebalken hat die gleichen Prinzipien wie der Fortschrittsbalken, die gleiche Struktur (natürlich unterschiedliche Klassennamen). Wenn Sie die Datei im Browser anzeigen, wird noch nicht zu viel passiert. Nun der Hauptteil, wir fügen ein Video hinzu! Für die volle Funktionalität und Browserübergreifende Unterstützung benötigen Sie Ihr Video in verschiedenen Formaten. Von jPlayer unterstützte HTML5-Medienformate sind: Verschiedene Browser unterstützen verschiedene Videoformate. Das entsprechende Format wird je nach Browser ausgewählt, sofern es verfügbar ist. Auf caniuse.com findest du weitere Informationen darüber, wer, was und wo. Wir benötigen auch eine PNG-Datei, die als Poster dient, wenn der Film nicht abgespielt wird. In diesem Tutorial verwende ich einen Film-Trailer, der von http://trailers.apple.com heruntergeladen wurde. Ich habe es dann in die richtigen Formate konvertiert (es gibt viele kostenlose Online-Ressourcen, um Ihnen hier draußen zu helfen, Google weg…) Sobald Sie sie konvertiert und Ihr .png-Poster erstellt haben, platzieren Sie sie an einem geeigneten Ort in Ihrem Projekt. Danach müssen wir ein Instantiierungs-Snippet hinzufügen, um jPlayer zum Laufen zu bringen. Fügen Sie dem Fuß Ihres Dokuments Folgendes hinzu: Denken Sie daran, die Dateipfade entsprechend Ihren eigenen Pfaden zu ändern. Sie werden sehen, dass wir jPlayer auf das Element "# jquery_jplayer_1" zeigen. In der jPlayer-Dokumentation finden Sie weitere Optionen und Attribute. OK, du solltest etwas ähnliches haben: Bevor wir mit dem Hinzufügen von CSS für die Steuerungsschnittstelle beginnen, fügen wir dem Hauptteil und auch den Stilen für die Basis des Videos einen Hintergrund, Schriftarten usw. hinzu. Erstellen Sie ein Stylesheet. Denken Sie daran, im Kopfbereich Ihrer Webseite einen Link darauf zu erstellen. Ich habe auch einen Reset durchgeführt, nur wenn Ihr Browser beschließt, einige Ränder und so weiter hinzuzufügen! Nach den Reset-Regeln habe ich einen Hintergrund mit einem Bild hinzugefügt. Als Nächstes habe ich den gesamten Player (das Video und die Steuerelemente) als Ziel ausgewählt, ich habe ihm eine Zeichensatzfamilie gegeben und einige Box-Schatten hinzugefügt (wobei ich daran denke, die Browser-Präfixe zu verwenden!). Wir haben ihm dann Stile für den Vollbildmodus des Players gegeben. Sie sollten jetzt etwas ähnliches wie das Folgende haben: Zeit, die Steuerelemente zu gestalten! Zuerst wird der graue Basisteil gestylt. Wir verwenden eine Flüssigkeitsbreite von 100%. Diese wird verwendet, damit sie sich im Vollbildmodus auf die volle Breite ausdehnt. Ich habe auch eine feste Höhe von 35px hinzugefügt. Als Nächstes verwenden wir einen Farbverlauf für den Hintergrund. Ich habe diesen Schritt mit GradientApp erstellt und dann mit der Prefixr-API bereinigt. Zum Schluss habe ich noch einen Box-Schatten hinzugefügt, um die eingefügten Schatten zu erzeugen, und erinnere mich wieder daran, die Browser-Präfixe zu verwenden. Als Nächstes habe ich einige Stile für den Steuerelementhalter (im Wesentlichen einen Container) hinzugefügt, sodass wir das Steuerfeld im Vollbildmodus zentrieren können. Sie werden später sehen, wie das funktioniert. Ich habe eine feste Breite von 570px verwendet und diese mit zentriert Sie sollten seit dem letzten Schritt nicht viel ändern, außer dem gerade hinzugefügten Hintergrund mit Farbverlauf: Als nächstes fügen wir die Play- und Pause-Buttons zusammen mit dem Trennzeichen hinzu. Ich werde ein Sprite für alle Buttons verwenden, die Sie in den Quelldateien finden können. Ich habe zuerst eine Breite und eine Höhe für die Schaltflächen Pause und Wiedergabe definiert. Beide haben die gleichen Abmessungen. Als Nächstes habe ich einen Texteinzug hinzugefügt, um den Text innerhalb der Ankerverknüpfungen vom Bildschirm zu entfernen, da er nicht benötigt wird. Wir verwenden das Sprite-Bild. Schließlich werden wir verwenden Okay, zuerst zielen wir auf die Fortschrittsbalkenbasis. Wir geben ihm einen durchgehenden Hintergrund, fügen einen Randradius von 5 Pixeln (mit den Präfixen), zwei Kästchenschatten, einen Schlagschatten und einen Einfügungsschatten hinzu. Als nächstes fügen wir einige Breiten und Höhen hinzu, beide fixiert. Wir fügen dann eine Randspitze hinzu, um sie innerhalb der gesamten Benutzeroberfläche zu zentrieren. Als Nächstes fügen wir einige Stile für die Suchleiste hinzu, die zeigen, wie viel das Video geladen hat. Wir wenden eine Breite von 0px an, da jPlayer die tatsächliche Breite dynamisch verarbeitet, und eine Höhe von 100%, damit die Höhe des Fortschrittsbalkens übernommen wird und die gesamte Breite ausgefüllt wird. Wir geben ihm außerdem den Grenzradius von 5px und einen Hintergrund. Zuletzt erstellen wir die Fortschrittsleiste, die sich beim Abspielen des Videos bewegt. Ich werde ein Bild verwenden und es auf der y-Achse wiederholen. Wie zuvor fügen wir wieder eine Breite von 0px hinzu, und der Rest wird von jPlayer behandelt. Denken Sie als nächstes an das von uns erstellte span-Tag. Dies wird für den Griff verwendet. Wir verwenden dazu auch ein Bild und positionieren es absolut. Wir müssen verwenden Time to do time (snigger) Ernsthaft, lassen Sie uns die aktuelle Zeit und Dauer anpassen. Wir werden zuerst beide ansprechen, um einige Stile anzuwenden, die sie freigeben. Der Rest ist Grundmaterial wie Margen. Wir sind noch nicht weit von der Fertigstellung entfernt, also behandeln wir den Volume-Bereich. Wir brauchen zwei Tasten, die Stummschaltung und die Stummschaltung. Wir werden etwas Stil auf beide und dann das Sprite einzeln anwenden. Beachten Sie, dass wir verwendet haben Wir sind jetzt auf dem letzten Schritt! Wir haben nur noch den Vollbild-Button. Mit ähnlichen Schritten wie zuvor wenden wir das Sprite erneut an, und verwenden Sie den Texteinzug, um den Text auszublenden (auch als Push-it-off-the-screen bekannt). Und erinnere mich daran zu verwenden Und unser Videoplayer ist komplett! Probieren Sie die Vollbildfunktion aus, es ist großartig! Durch die Verwendung des jPlayer-Plugins und des reizvollen Designs von Orman haben wir eine pixelgenaue Videoplayer-Schnittstelle erstellt. Vergessen Sie nicht, dass jPlayer noch viele weitere Tricks im Ärmel hat. Schauen Sie sich also die Demos und die Dokumentation an. Ich hoffe, Ihnen hat dieses Tutorial gefallen, danke fürs Lesen.
Schritt 4: Steuerelemente Markup
Spielpause
Schritt 5: Ein Video hinzufügen
Schritt 6: Video Base CSS
html, body, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, und adresse, zitieren, code, del, dfn, em, img, ins, kbd, q, s, samp, klein, streik, stark, sub, sup, tt, var, b, u, ich, dl, dt, dd, ol, ul, li, fieldset, form, label, legende, tabelle, caption, tbody, tfoot, thead, tr, th, td, artikel, beiseite, leinwand, details, einbetten, figur, figcaption, footer, header, hgroup, menü, nav, ausgabe, rubin, abschnitt, zusammenfassung, time, mark, audio, video, input, textarea, select background: transparent; border: 0; font-size: 100%; margin: 0; gliederung: 0; padding: 0; vertical-align: baseline -Artikel Details, figcaption, Abbildung, Fußzeile, Kopfzeile, hgroup, Menü, Nav, Abschnitt Anzeige: Block body Zeilenhöhe: 1 abbr [title], dfn [title] Rand unten: 1px gepunktet; Cursor: help blockquote, q quotes: none blockquote: before, blockquote: after, q: before, q: after inhalt: none del textdekoration: zeilendurchsichtig hr hintergrund: transparent; border: 0; klar: beides; farbe: transparent; höhe: 1px; rand: 0; auffüllen: 0 markiere hintergrundfarbe: # ffffb3; font-style: italic eingabe, wähle vertical-align: middle ins backgro und-color: rot; color: white; text-decoration: none ol, ul list-style: none table border-collapse: collapse; border-spacing: 0 a text-decoration: none; body Marge: 0; Polsterung: 0; Hintergrund: URL ("bg.jpg") wiederholen; .jp-video Schriftfamilie: "Helvetica Neue", Helvetica, Arial, serifenlos; Position: relativ; -webkit-box-shadow: 0px 0px 20px rgba (0,0,0, .3); -moz-box-shadow: 0px 0px 20px rgba (0,0,0, .3); Box-Schatten: 0px 0px 20px rgba (0,0,0, .3); .jp-video-360p width: 570px; Marge: 100px auto; .jp-video-full width: 480px; Höhe: 270px; Position: statisch! wichtig; Position: relativ .jp-video-full .jp-jplayer top: 0; links: 0; Position: fest! wichtig; Position: relativ; / * Regeln für IE6 (Vollbild) * / overflow: hidden; z-Index: 1000; .jp-video-full .jp-gui position: fixed! important; Position: statisch; / * Regeln für IE6 (Vollbild) * / top: 0; links: 0; Breite: 100%; Höhe: 100%; z-Index: 1000; .jp-video-full .jp-interface position: absolut! wichtig; Position: relativ; / * Regeln für IE6 (Vollbild) * / bottom: 0; links: 0; z-Index: 1000; 
Schritt 7: Grundlegende Steuerelemente
Marge: 0 auto; .jp-interface position: relativ; Breite: 100%; Höhe: 35px; Hintergrundbild: -webkit-linearer Gradient (oben, rgb (242, 242, 242), rgb (209, 209, 209)); Hintergrundbild: -moz-linearer Gradient (oben, rgb (242, 242, 242), rgb (209, 209, 209)); Hintergrundbild: -o-linearer Gradient (oben, rgb (242, 242, 242), rgb (209, 209, 209)); Hintergrundbild: -ms-linearer Gradient (oben, rgb (242, 242, 242), rgb (209, 209, 209)); Hintergrundbild: linearer Gradient (oben, rgb (242, 242, 242), rgb (209, 209, 209)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f2f2f2', EndColorStr = "# d1d1d1"); -webkit-box-shadow: Einfügung 0px 1px 0px # f7f7f7, Einfügung 0px -1px 0px # e2e2e2; -moz-box-shadow: Einfügung 0px 1px 0px # f7f7f7, Einfügung 0px -1px 0px # e2e2e2; Box-Schatten: Einfügung 0px 1px 0px # f7f7f7, Einfügung 0px -1px 0px # e2e2e2; div.jp-Steuerelement-Inhaber clear: both; Breite: 570px; Marge: 0 auto; Position: relativ; Überlauf versteckt;
Schritt 8: Play- und Pause-Tasten
Umriss: keine; Dadurch wird ein Problem beim Klicken behoben, wodurch einige Browser ein schreckliches blaues Leuchten um die Schaltfläche herum anzeigen. a.jp-play, a.jp-pause width: 40px; Höhe: 35px; Schwimmer: links; Text-Gedankenstrich: -9999px; Umriss: keine; a.jp-play background: url ("sprite.png") 0 0 keine Wiederholung; a.jp-pause background: url ("sprite.png") -40px 0 no-repeat; Anzeige: keine; .separator Hintergrundbild: URL ("separator.png"); Hintergrundwiederholung: keine Wiederholung; Breite: 2px; Höhe: 35px; Schwimmer: links; Rand oben: 7px; Rand rechts: 10px;
Schritt 9: Fortschrittsbalken
rechts: XXpx; um sicherzustellen, dass es sich zusammen mit der Spielleiste bewegt. .jp-progress hintergrund: # 706d6d; -webkit-border-radius: 5px; -moz-border-radius: 5px; Grenzradius: 5px; -webkit-box-shadow: Einfügung 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255.255.255, .4); -moz-box-shadow: Einfügung 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); Box-Schatten: Einfügung 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); Breite: 280px; Höhe: 10px; Schwimmer: links; Rand oben: 13px; .jp-Suchleiste width: 0px; Höhe: 100%; Cursor: Zeiger; .jp-seeking-bg Hintergrund: # 575555; -webkit-border-radius: 5px; -moz-border-radius: 5px; Grenzradius: 5px; .jp-play-bar background: url ("play-bar.png") left repeat-x; Breite: 0px; Höhe: 10px; Position: relativ; z-Index: 9999; -webkit-border-radius: 5px; -moz-border-radius: 5px; Grenzradius: 5px; .jp-play-bar span position: absolut; oben: -3px; rechts: -12px; Hintergrund: URL ("handle.png") kein Wiederholungszentrum; Breite: 16px; Höhe: 17px; 
Schritt 10: Aktuelle Zeit / Dauer
.jp-current-time, .jp-duration font-size: 11px; Schriftfamilie: Arial; Farbe: # 444444; Rand oben: 12px; Schwimmer: links; .jp-current-time float: left; Anzeige: Inline; .jp-duration float: left; Anzeige: Inline; Textausrichtung: rechts; .jp-video .jp-aktuelle Uhrzeit Rand links: 10px; .jp-video .jp-duration margin-right: 10px; .time-sep float: left; Marge: 13px 3px 0 3px; Schriftgröße: 11px; Schriftfamilie: Arial; Farbe: # 444444;
Schritt 11: Lautstärketasten und Bar
Umriss: keine; um diesen problematischen aktiven Zustand zu vermeiden. Um die Volume-Leiste zu erstellen, verwenden wir einen ähnlichen Vorgang wie die Fortschrittsleiste. Wir wenden eine feste Breite und Höhe an, geben einen Hintergrund, einige Kästchenschatten und einen Randradius von 5 Pixeln an. Der Lautstärkebalken selbst ist transparent, sodass wir keinen Hintergrund darauf anwenden. Als nächstes haben wir einen weiteren Knopf. Wenn Sie einen Span erneut verwenden, wird ein Hintergrundbild angewendet Position: absolut; und positionieren Sie es nach rechts, damit es sich korrekt bewegt. .jp-video a.jp-stumm, .jp-video a.jp-stummschaltung text-indent: -9999px; Schwimmer: links; Höhe: 35px; Umriss: keine; .jp-stumm float: left; Hintergrund: URL (… /images/sprite.png) -80px 0 no-repeat; Rand oben: 1px; Rand links: -10px; Breite: 35px; a.jp-unmute background: url (… /images/sprite.png) -115px 0 no-repeat; Rand oben: 1px; Rand links: -13px; Anzeige: keine; Breite: 38px; .jp-volume-bar float: left; Rand oben: 13px; Rand rechts: 10px; Überlauf versteckt; Breite: 70px; Höhe: 10px; Cursor: Zeiger; Hintergrund: # 706d6d; -webkit-border-radius: 5px; -moz-border-radius: 5px; Grenzradius: 5px; -webkit-box-shadow: Einfügung 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255.255.255, .4); -moz-box-shadow: Einfügung 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); Box-Schatten: Einfügung 0px 1px 4px rgba (0,0,0, .4), 0px 1px 0px rgba (255,255,255, .4); .jp-volume-bar-value background: transparent; Breite: 0px; Höhe: 10px; Position: relativ; .jp-volume-bar-value span position: absolut; oben: 0px; rechts: 0px; Hintergrund: URL (… /images/volume.png) Zentrum ohne Wiederholung; Breite: 11px; Höhe: 10px;
Schritt 12: Vollbild-Taste
Umriss: keine; wieder (was freilich auf alle Anker am Anfang des Stylesheets angewendet werden kann). .jp-full-screen Hintergrund: URL (… /images/sprite.png) -150px 0 no-repeat; Schwimmer: links; Breite: 40px; Höhe: 35px; Text-Gedankenstrich: -9999px; Rand links: -15px; Umriss: keine; .jp-restore-screen Hintergrund: URL (… /images/sprite.png) -150px 0 no-repeat; Schwimmer: links; Breite: 40px; Höhe: 35px; Text-Gedankenstrich: -9999px; Rand links: -15px; Umriss: keine;
Fazit
Accentsconagua