Skin Orman Clarks Video-Oberfläche mit jPlayer und CSS

() translation by (you can also view the original English article)

Das Codieren der Premium Pixel-Designs von Orman Clark macht großen Spaß. Dieses Mal werfen wir einen Blick auf seine Video-Player-Oberfläche! Wir werden sie mit einer fantastischen HTML5-Videobibliothek namens jPlayer zusammen mit etwas HTML und CSS erstellen.

Schritt 1: HTML5 Base Markup

Wir beginnen mit dem Zusammenstellen eines leeren HTML5-Dokuments, während wir uns daran erinnern, jQuery im Kopf zu quellen (ich verwende von Google gehostetes jQuery). Ich werde auch auf den neuesten HTML-Shiv verlinken, der sicherstellt, dass Internet Explorer HTML5-Elemente korrekt interpretiert und formatiert.

Danach werden Sie feststellen, dass ich auch ein Stylesheet verlinkt habe. Wir werden das CSS später im Tutorial hinzufügen.


<!DOCTYPE>
<html>
	<head>

		<!--Meta tags-->
		<meta charset="utf-8">

		<!--Title-->
		<title></title>
		
		<!--Stylesheets-->
		<link rel="stylesheet" href="css/styles.css">

		<!--jQuery-->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		
		<!--[if lt IE 9]>
        	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    	<![endif]-->
	
	</head>
<body>

</body>
</html>

Schritt 2: Download von jPlayer

Wir müssen jPlayer "The jQuery HTML5 Audio/Video Library" herunterladen. Besuchen Sie 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 jquery.jplayer.min.js in diesen Ordner. Dann müssen Sie in Ihrem HTML-Code einen Link dazu erstellen. Fügen Sie daher in Ihrem Abschnitt <head> Folgendes hinzu (denken Sie daran, den Pfad entsprechend zu ändern).

1
2	<!--jPlayer-->
3	<script src="js/jquery.jplayer.min.js"></script>

Schritt 3: Player Markup

Wir werden jetzt das Markup hinzufügen, das wir zum Erstellen des Players benötigen. Machen Sie sich keine Sorgen, wenn es überwältigend erscheint. Das meiste davon stammt aus Demos auf der Website jplayer.org, und ich werde später alles Notwendige erklären.


<!--container for everything-->
<div id="jp_container_1" class="jp-video jp-video-360p">

	<!--container in which our video will be played-->
	<div id="jquery_jplayer_1" class="jp-jplayer"></div>
	
	<!--main containers for our controls-->
	<div class="jp-gui">
		<div class="jp-interface">
			<div class="jp-controls-holder">
			
	
			
			</div><!--end jp-controls-holder-->
		</div><!--end jp-interface-->
	</div><!--end jp-gui-->
	
	<!--unsupported message-->
	<div class="jp-no-solution">
		<span>Update Required</span>
		Here's a message which will appear if the video isn't supported. A Flash alternative can be used here if you fancy it.
	</div>
	
</div><!--end jp_container_1-->

Zunächst sehen Sie einen Hauptcontainer für alles. Wir werden einige globale Stile darauf anwenden. Dann gibt es das div "#jquery_jplayer_1", auf das das jPlayer-Skript abzielt und das Video hinzufügt (diese ID wird in der jQuery-Funktion referenziert, wenn wir das hinzufügen).

Sie müssen sich wirklich nur mit dem befassen, was sich in den <div class="jp-gui"> -Tags befindet. Dies ist der Hauptabschnitt, der die Videosteuerelemente enthält. Wir werden ein paar weitere Container darin erstellen, die alle beim Ändern der Größe helfen, je nachdem, ob der Vollbildmodus aktiviert oder deaktiviert ist.

Schritt 4: Steuer Element-Markup

Nun zu den guten Sachen..


<!--play and pause buttons-->
<a href="javascript:;" class="jp-play" tabindex="1">play</a>
<a href="javascript:;" class="jp-pause" tabindex="1">pause</a>
<span class="separator sep-1"></span>

<!--progress bar-->
<div class="jp-progress">
    <div class="jp-seek-bar">
        <div class="jp-play-bar"><span></span></div>
    </div>
</div>

<!--time notifications-->
<div class="jp-current-time"></div>
<span class="time-sep">/</span>
<div class="jp-duration"></div>
<span class="separator sep-2"></span>

<!--mute / unmute toggle-->
<a href="javascript:;" class="jp-mute" tabindex="2" title="mute">mute</a>
<a href="javascript:;" class="jp-unmute" tabindex="2" title="unmute">unmute</a>

<!--volume bar-->
<div class="jp-volume-bar">
    <div class="jp-volume-bar-value"><span class="handle"></span></div>
</div>
<span class="separator sep-2"></span>

<!--full screen toggle-->
<a href="javascript:;" class="jp-full-screen" tabindex="3" title="full screen">full screen</a>
<a href="javascript:;" class="jp-restore-screen" tabindex="3" title="restore screen">restore screen</a>

Hier haben wir unsere Steuerelemente hinzugefügt, die alle aus Gründen der Übersichtlichkeit kommentiert wurden. Zum Auftakt unsere Wiedergabetaste gefolgt von der Pause-Taste. Beide erhalten später geeignete Klassennamen für das Styling. Als nächstes haben wir eine Spanne mit einer Klasse von 'separator'. Orman verwendete einige raffinierte kleine Trennzeichen im Design, da es sich um Trennzeichen mit einem Farbverlauf handelt, verwenden wir ein Bild für diese (wenn Sie sicher sind, können Sie auch CSS3-Farbverläufe verwenden).

Weiter erstellen wir den Fortschrittsbalken und es gibt einige Elemente, die dazu beitragen, diesen zu erstellen. Zuerst haben wir 'jp-progress', das die Basis des Fortschrittsbalkens ist. Dann haben wir 'jp-play-bar'. Dies ist der coole rote Balken, der den Fortschritt des Videos anzeigt. Beachten Sie, dass wir hier auch eine Spanne mit einer Klasse von 'handle' verwenden, um den im Design gezeigten kleinen Knopf zu erstellen.

Nun zur aktuellen Zeit und Dauer des Videos. Wir werden diese noch einmal 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 weiteres Trennzeichen zu erstellen, aber einen Schrägstrich verwenden, damit hier keine Bilder verwendet werden. Nach dieser Menge werden Sie sehen, dass wir ein anderes Trennzeichen haben, wie zuvor.

Die Lautstärketasten und die Leiste müssen dann erstellt werden. Zuerst erstellen wir zwei Schaltflächen, 'jp-mute' und 'jp-unmute'. Es wird jeweils nur eine davon angezeigt, die andere wird mit jPlayer ausgeblendet. Die Volumenleiste hat die gleichen Prinzipien wie die Fortschrittsanzeige, dieselbe Struktur (obwohl natürlich unterschiedliche Klassennamen).

Wenn Sie die Datei im Browser anzeigen, wird noch nicht zu viel passieren.

Schritt 5: Hinzufügen eines Videos

Nun zum Hauptteil, wir werden ein Video hinzufügen! Für volle Funktionalität und browserübergreifende Unterstützung benötigen Sie Ihr Video in mehreren Formaten. Von jPlayer unterstützte HTML5-Medienformate sind:

mp3
mp4 (AAC/H.264)
ogg (Vorbis/Theora)
webm (Vorbis/VP8)
wav

Verschiedene Browser unterstützen unterschiedliche Videoformate. Das entsprechende Format wird je nach Browser ausgewählt, sofern es verfügbar ist. Unter caniuse.com finden Sie weitere Informationen darüber, wer, was und wo.

Wir benötigen außerdem eine PNG-Datei, die als Poster dient, wenn der Film nicht abgespielt wird.

Für dieses Tutorial verwende ich einen Filmtrailer, der von http://trailers.apple.com heruntergeladen wurde. Ich habe es dann in die richtigen Formate konvertiert (es gibt viele kostenlose Online-Ressourcen, die Ihnen hier helfen, Google weg..)

Sobald Sie sie konvertiert und Ihr PNG-Poster erstellt haben, platzieren Sie sie an einer geeigneten Stelle in Ihrem Projekt. Danach müssen wir ein Instanziierungs-Snippet hinzufügen, um jPlayer zum Laufen zu bringen.

Fügen Sie am Fuß Ihres Dokuments Folgendes hinzu, und denken Sie daran, die Dateipfade so zu ändern, dass sie Ihren eigenen entsprechen. Sie werden sehen, dass wir jPlayer auf das Element "#jquery_jplayer_1" verweisen.


<!--instantiate-->
<script type="text/javascript">
$(document).ready(function(){

	$("#jquery_jplayer_1").jPlayer({
		ready: function () {
			$(this).jPlayer("setMedia", {
				m4v: "mi4.m4v",
				ogv: "mi4.ogv",
				webmv: "mi4.webm",
				poster: "mi4.png"
			});
		},
		swfPath: "js",
		supplied: "webmv, ogv, m4v",
		size: {
			width: "570px",
			height: "340px",
			cssClass: "jp-video-360p"
		}
	});

});
</script>

Weitere Optionen und Attribute finden Sie in der jPlayer-Dokumentation. OK, Sie sollten etwas Ähnliches haben:

Schritt 6: Video Base CSS

Bevor wir mit dem Hinzufügen von CSS für die Steueroberfläche beginnen, fügen wir dem Text einen Hintergrund, Schriftarten usw. sowie die Stile für die Basis des Videos hinzu. Erstellen Sie ein Stylesheet und denken Sie daran, im Kopfbereich Ihrer Webseite darauf zu verlinken. Ich habe auch einen Reset durchgeführt, nur für den Fall, dass Ihr Browser beschließt, einige Ränder hinzuzufügen und so weiter!

Nach den Reset-Regeln habe ich einen Hintergrund mit einem Bild hinzugefügt. Als nächstes habe ich den gesamten Player (das Video und die Steuerelemente) als Ziel ausgewählt, ihm eine Schriftfamilie gegeben und einige Box-Shadows hinzugefügt (wobei ich daran gedacht habe, die Browser-Präfixe zu verwenden!). Wir haben ihm dann Stile gegeben, wenn sich der Player im Vollbildmodus befindet.


html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,and,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,textarea,select{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}del{text-decoration:line-through}hr{background:transparent;border:0;clear:both;color:transparent;height:1px;margin:0;padding:0}mark{background-color:#ffffb3;font-style:italic}input,select{vertical-align:middle}ins{background-color:red;color:white;text-decoration:none}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none;}

body {
	margin:0;
	padding:0;
	background:url("bg.jpg") repeat;
}

.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;
	margin: 100px auto;
}
.jp-video-full {
	width:480px;
	height:270px;
	position:static !important; 
	position:relative
}
.jp-video-full .jp-jplayer {
	top: 0;
	left: 0;
	position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */
	overflow: hidden;
	z-index:1000;
}

.jp-video-full .jp-gui {
	position: fixed !important; position: static; /* Rules for IE6 (full-screen) */
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	z-index:1000;
}
.jp-video-full .jp-interface {
	position: absolute !important; position: relative; /* Rules for IE6 (full-screen) */
	bottom: 0;
	left: 0;
	z-index:1000;
}

Sie sollten jetzt etwas Ähnliches wie das Folgende haben:

Schritt 7: Grundlegendes Steuer Element-Styling

Es ist Zeit, den Steuerungsbereich zu gestalten! Wir werden zuerst den grauen Basisteil stylen. Wir verwenden eine Flüssigkeitsbreite von 100%. Diese wird verwendet, damit sie sich im Vollbildmodus auf die volle Breite ausdehnt. Ich habe auch eine feste Höhe von 35px hinzugefügt. Als nächstes verwenden wir einen Verlauf für den Hintergrund. Ich habe diesen mit GradientApp erstellt und ihn dann mit der Prefixr API bereinigt.

Schließlich habe ich einen Kastenschatten hinzugefügt, um die eingefügten Schatten zu erstellen, und wieder daran gedacht, die Browserpräfixe zu verwenden. Als nächstes habe ich einige Stile für den Steuerelementhalter hinzugefügt (im Grunde genommen einen Container), mit denen wir das Bedienfeld im Vollbildmodus zentrieren können. Sie werden später sehen, wie das funktioniert. Ich habe eine feste Breite von 570px verwendet und sie mit dem Rand margin: 0 auto;


.jp-interface {
	position: relative;
	width:100%;
	height: 35px;

	background-image: -webkit-linear-gradient(top, rgb(242, 242, 242), rgb(209, 209, 209));
	background-image: -moz-linear-gradient(top, rgb(242, 242, 242), rgb(209, 209, 209));
	background-image: -o-linear-gradient(top, rgb(242, 242, 242), rgb(209, 209, 209));
	background-image: -ms-linear-gradient(top, 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;
	width:570px;
	margin: 0 auto;
	
	position: relative;
	overflow:hidden;
}

Seit dem letzten Schritt sollte sich nicht viel ändern, außer dem gerade hinzugefügten Verlaufshintergrund:

Schritt 8: Wiedergabe- und Pause-Tasten

Weiter fügen wir die Wiedergabe- und Pause-Schaltflächen zusammen mit dem Trennzeichen hinzu. Ich werde ein Sprite für alle Schaltflächen verwenden, die Sie in den Quelldateien abrufen können.

Ich habe zuerst eine Breite und Höhe für die Pausen- und Wiedergabetasten definiert. Beide haben die gleichen Abmessungen. Als nächstes habe ich einen Texteinzug hinzugefügt, um Text innerhalb der Ankerlinks vom Bildschirm zu entfernen, da wir ihn nicht benötigen. Wir werden das Sprite-Bild verwenden. Schließlich werden wir Gliederung outline: none; Dies behebt ein Problem beim Klicken und verhindert, dass einige Browser ein schreckliches blaues Leuchten um die Schaltfläche zeigen.


a.jp-play,
a.jp-pause {
	width:40px;
	height:35px;
	float:left;
	text-indent:-9999px;
	outline:none;
}

a.jp-play {
	background: url("sprite.png") 0 0 no-repeat;
}

a.jp-pause {
	background: url("sprite.png") -40px 0 no-repeat;
	display: none;
}

.separator {
	background-image:url("separator.png");
	background-repeat:no-repeat;
	width: 2px;
	height: 35px;
	float:left;
	margin-top: 7px;
	margin-right: 10px;
}

Schritt 9: Progress Bar

Okay, zuerst zielen wir auf die Basis des Fortschrittsbalkens. Wir geben ihm einen festen Hintergrund, fügen einen Randradius von 5 Pixel (mit den Präfixen), zwei Kastenschatten, einen Schlagschatten und einen eingefügten Schatten hinzu. Danach fügen wir einige Breiten und Höhen hinzu, die beide fest sind. Wir werden dann einen Rand oben hinzufügen, um ihn innerhalb der gesamten Benutzeroberfläche zu zentrieren.

Dann fügen wir einige Stile für die Suchleiste hinzu, die anzeigen, wie viel das Video geladen hat. Wir wenden eine Breite von 0px an, da jPlayer die tatsächliche Breite dynamisch verarbeitet, und eine Höhe von 100%, sodass die Höhe des Fortschrittsbalkens geerbt und alles aufgefüllt wird. Wir geben ihm auch den Randradius von 5px und einen Hintergrund.

Zuletzt erstellen wir den Fortschrittsbalken, der sich während der Wiedergabe des Videos bewegt. Ich werde ein Bild verwenden und es auf der y-Achse wiederholen. Wie zuvor werden wir wieder eine Breite von 0px hinzufügen und jPlayer wird den Rest erledigen. Erinnern Sie sich als nächstes an das Span-Tag, das wir erstellt haben? Dies wird für den Griff verwendet. Wir werden auch dafür ein Bild verwenden und es absolut positionieren. Wir müssen verwenden right:XXpx; um sicherzustellen, dass es sich zusammen mit der Wiedergabeleiste bewegt.


.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);

	width:280px;
	height: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") left repeat-x;
	width:0px;
	height:10px;
	position:relative;
	z-index: 9999;
	
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}

.jp-play-bar span {
	position:absolute;
	top: -3px;
	right: -12px;

	background:url("handle.png") no-repeat center;
	width: 16px;
	height: 17px;
}

Schritt 10: Aktuelle Zeit/Dauer

Es ist die Zeit zu gewinnen (kichern), lassen Sie uns die aktuelle Zeit und Dauer anpassen. Wir werden beide zuerst ansprechen, um einige Stile anzuwenden, die sie teilen werden. Der Rest sind grundlegende Dinge wie Ränder.


.jp-current-time,
.jp-duration {
	font-size:11px;
	font-family:Arial;
	color:#444444;
	margin-top: 12px;
	float:left;
}
.jp-current-time {
	float: left;
	display:inline;
}
.jp-duration {
	float: left;
	display:inline;
	text-align: right;
}
.jp-video .jp-current-time {
	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;
}

Schritt 11: Lautstärketasten und Leiste

Wir sind noch nicht weit von der Fertigstellung entfernt, also lasst uns den Volumenabschnitt behandeln. Wir brauchen zwei Tasten, die Stummschaltung und die Stummschaltung. Wir werden beide mit einem Styling versehen und dann das Sprite für jedes einzeln.

Beachten Sie, dass wir verwendet haben outline:none; wieder, um diesen problematischen aktiven Zustand zu vermeiden. Um die Volumenleiste zu erstellen, verwenden wir einen ähnlichen Prozess wie die Fortschrittsleiste. Wir wenden eine feste Breite und Höhe an, geben ihm einen Hintergrund, einige Kastenschatten und einen Randradius von 5 Pixel. Die Lautstärkeleiste selbst ist transparent, sodass wir keinen Hintergrund darauf anwenden. Als nächstes haben wir einen anderen Knopf; Wenn wir wieder eine Spanne verwenden, wenden wir ein Hintergrundbild an. Verwenden Sie position:absolute; und positionieren Sie es rechts, damit es sich richtig bewegt.


.jp-video a.jp-mute,
.jp-video a.jp-unmute {
	text-indent:-9999px;
	float:left;
	
	height: 35px;
	outline:none;
}

.jp-mute {
	float:left;
	background: url(../images/sprite.png) -80px 0 no-repeat;
	margin-top: 1px;
	margin-left: -10px;
	width: 35px;
}

a.jp-unmute {
	background: url(../images/sprite.png) -115px 0 no-repeat;
	margin-top: 1px;
	margin-left: -13px;
	display: none;
	width: 38px;
}

.jp-volume-bar {
	float:left;
	margin-top: 13px;
	margin-right: 10px;
	overflow:hidden;
	width:70px;
	height:10px;
	cursor: pointer;

	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);
}

.jp-volume-bar-value {
	background: transparent;
	width:0px;
	height:10px;
	position: relative;
}

.jp-volume-bar-value span {
	position:absolute;
	top: 0px;
	right: 0px;

	background:url(../images/volume.png) no-repeat center;
	width: 11px;
	height: 10px;
}

Schritt 12: Vollbild-Schaltfläche

Wir sind jetzt auf dem letzten Schritt! Wir haben nur noch die Vollbild-Schaltfläche. Mit ähnlichen Schritten wie zuvor wenden wir das Sprite erneut an. Verwenden Sie den Texteinzug, um den Text auszublenden (auch als "Push-it-off-the-Screen" bezeichnet). Und denken Sie daran, Gliederung zu verwenden outline:none; wieder (was zugegebenermaßen auf alle Anker am Anfang des Stylesheets angewendet werden konnte).


.jp-full-screen {
	background: url(../images/sprite.png) -150px 0 no-repeat;
	float:left;
	width: 40px;
	height: 35px;
	text-indent:-9999px;
	margin-left: -15px;
	outline:none;
}

.jp-restore-screen {
	background: url(../images/sprite.png) -150px 0 no-repeat;
	float:left;
	width: 40px;
	height: 35px;
	text-indent:-9999px;
	margin-left: -15px;
	outline:none;
}

Und unser Video-Player ist komplett!

Probieren Sie die Vollbildfunktion aus, sie ist fantastisch!

Abschluss

Mit dem jPlayer-Plugin und dem reizvollen Design von Orman haben wir eine pixelgenaue Video-Player-Oberfläche codiert. Vergessen Sie nicht, dass jPlayer noch viele weitere Tricks auf Lager hat. Schauen Sie sich also unbedingt die Demos und die Dokumentation an. Ich hoffe, Ihnen hat dieses Tutorial gefallen, danke fürs Lesen.