Skin Antarmuka Video Orman Clark Menggunakan jPlayer dan CSS

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

Pengkodean desain Premium Pixel Orman Clark sangat menyenangkan, kali ini kita akan melihat Tampilan Video Player-nya! Kita akan membangunnya menggunakan perpustakaan video HTML5 mengagumkan yang disebut jPlayer bersama dengan beberapa HTML dan CSS.

Langkah 1: Markup Dasar HTML5

Kita akan memulai dengan menyatukan dokumen HTML5 kosong, sambil mengingat sumber jQuery di head (saya menggunakan jQuery yang dihosting oleh Google). Saya juga akan menautkan ke shiv HTML terbaru yang akan memastikan interpretasi Internet Explorer dan menata elemen HTML5 dengan benar.

Satu hal lagi, Anda akan memperhatikan bahwa saya telah menautkan ke stylesheet juga, kita akan menambahkan CSS nanti di tutorial.


<!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>

Langkah 2: Mengunduh jPlayer

Selanjutnya kita harus mengunduh jPlayer "Perpustakaan Audio/Video HTML5". Buka jplayer.org dan unduh rilis terbaru.

File jPlayerLanjutkan dan buat folder bernama "javascript" atau "js" (atau apa pun yang Anda terbiasa dengannya) di folder web Anda dan salin jquery.jplayer.min.js ke dalamnya. Selanjutnya Anda harus menautkan ke ini di HTML Anda, jadi tambahkan yang berikut di bagian <head> (ingat untuk mengubah path yang sesuai).

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

Langkah 3: Markup Pemutar

Kita sekarang akan menambahkan markup yang kita butuhkan untuk membuat pemutarnya. Jangan khawatir jika ia muncul luar biasa, sebagian besar ini diambil dari demo di situs jplayer.org dan saya akan menjelaskan semua yang diperlukan nanti.


<!--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-->

Pertama, Anda akan melihat kontainer utama untuk semuanya. Kita akan menerapkan beberapa gaya global untuknya. Kemudian ada div "#jquery_jplayer_1" yang akan ditargetkan skrip jPlayer dan ditambahkan videonya (Anda akan melihat id ini direferensikan dalam fungsi jQuery ketika kita menambahkannya).

Anda benar-benar hanya perlu memperhatikan diri Anda sendiri dengan apa pun yang ada di dalam tag <div class ="jp-gui">. Ini adalah bagian utama yang akan berisi kontrol video. Kita akan membuat beberapa kontainer lain di dalamnya yang semuanya membantu mengubah ukuran tergantung pada apakah layar penuh aktif atau tidak aktif.

Langkah 4: Markup Kontrol

Sekarang untuk hal yang bagus..


<!--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>

Di sini kita telah menambahkan kontrol kita, semuanya dikomentari untuk kejelasannya. Untuk memulai, tombol putar kita diikuti oleh tombol jeda. Keduanya diberi nama kelas yang sesuai untuk penataan di nanti. Selanjutnya, kita memiliki span dengan kelas 'separator'. Orman menggunakan beberapa pemisah kecil yang bagus dalam desainnya, karena ini adalah pemisah dengan gradien pada mereka, kita akan menggunakan gambar untuk ini (meskipun bebas untuk menggunakan gradien CSS3 jika Anda yakin).

Selanjutnya kita membuat bilah kemajuan dan ada beberapa elemen yang masuk untuk membangun ini. Pertama kita memiliki 'jp-progress' yang merupakan dasar dari bilah kemajuan. Selanjutnya kita memiliki 'jp-play-bar'. Ini adalah bilah merah keren yang bergulir menandakan kemajuan video. Perhatikan kita juga menggunakan span dengan kelas 'handle' di sini untuk membuat tombol kecil yang ditunjukkan dalam desain.

Sekarang untuk waktu dan durasi video saat ini. Kita akan membuat ini sekali lagi menggunakan div, dengan kelas 'jp-current-time' dan 'jp-duration'. Perhatikan kita juga menggunakan kelas span lain lagi, kali ini untuk membuat pemisah lain tetapi menggunakan garis miring ke depan sehingga tidak ada gambar yang akan digunakan di sini. Setelah itu, Anda akan melihat kita memiliki pemisah lain, sama seperti sebelumnya.

Tombol dan bilah volume perlu dibuat. Pertama kita akan membuat dua tombol, 'jp-mute' dan 'jp-unmute'. Hanya satu yang akan ditampilkan pada satu waktu, yang lain akan disembunyikan dengan jPlayer. Bilah volume memiliki prinsip yang sama seperti bilah kemajuan, struktur yang sama (meskipun nama kelas yang berbeda, tentu saja).

Jika Anda melihat file di browser, Anda tidak akan melihat terlalu banyak yang terjadi.

Langkah 5: Menambahkan Video

Sekarang bagian utama, kita akan menambahkan video! Untuk fungsionalitas penuh dan dukungan lintas-browser, Anda akan membutuhkan video Anda dalam berbagai format. Format media HTML5 yang didukung oleh jPlayer adalah:

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

Berbagai browser mendukung berbagai format video; format yang relevan akan dipilih tergantung pada browser yang disediakan sudah tersedia. Periksa caniuse.com untuk informasi lebih lanjut tentang siapa, apa, dan di mana.

Kita juga membutuhkan file .png yang berfungsi sebagai poster ketika film tidak diputar.

Untuk tujuan tutorial ini saya menggunakan cuplikan film yang diunduh dari http://trailers.apple.com. Saya kemudian mengubahnya menjadi format yang benar (ada banyak sumber daya online gratis untuk membantu Anda di sini, Google saja..)

Jadi, setelah Anda mengonversinya dan membuat poster .png Anda, tempatkan mereka di suatu tempat yang sesuai dalam proyek Anda. Setelah itu kita perlu menambahkan cuplikan instansiasi untuk mengaktifkan dan menjalankan jPlayer.

Tambahkan hal berikut ke foot dokumen Anda, ingat untuk mengubah path file agar mencerminkan milik Anda. Anda akan melihat bahwa kita menunjuk jPlayer ke elemen "#jquery_jplayer_1".


<!--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>

Lihat dokumentasi jPlayer untuk opsi dan atribut lainnya. Oke, Anda harus memiliki sesuatu yang mirip dengan ini:

Langkah 6: CSS Dasar Video

Sebelum kita menambahkan CSS untuk antarmuka kontrol, kita akan menambahkan latar belakang, font dll ke body dan juga gaya untuk dasar video. Lanjutkan dan buat sebuah stylesheet, ingat untuk menautkannya di bagian head halaman web Anda. Saya juga telah meletakkan reset hanya memastikan browser Anda memutuskan untuk menambahkan beberapa margin dan yang lainnya!

Setelah aturan reset saya menambahkan latar belakang dengan gambar. Berikutnya saya telah menargetkan seluruh pemutar (video dan kontrol), saya telah memberikannya font-family dan menambahkan beberapa box-shadow (sambil mengingat untuk menggunakan awalan browser!). Kita kemudian memberikannya gaya ketika pemutar berada dalam mode layar penuh.


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

Anda seharusnya sekarang memiliki sesuatu yang mirip dengan yang berikut:

Langkah 7: Penataan Kontrol Dasar

Saatnya mulai menata bagian kontrol! Pertama-tama kita akan menata bagian abu-abu dasar. Kita akan menggunakan fluid-width 100%, ini digunakan sehingga akan meregang menjadi lebar penuh saat dalam mode layar penuh. Saya juga menambahkan fixed height 35px. Selanjutnya kita akan menggunakan gradien untuk latar belakang, lanjutkan dan membuat ini menggunakan GradientApp dan kemudian membersihkannya menggunakan Prefixr API.

Akhirnya saya menambahkan box-shadow untuk membuat bayangan inset, sekali lagi ingatlah untuk menggunakan awalan browser. Saya selanjutnya menambahkan beberapa gaya untuk pemegang kontrol (pada dasarnya sebuah wadah), memungkinkan kita untuk memusatkan panel kontrol ketika dalam mode layar penuh. Anda akan melihat cara kerjanya nanti. Saya telah menggunakan fixed width 570px dan memusatkannya menggunakan 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;
}

Anda tidak akan melihat banyak perubahan sejak langkah terakhir kecuali latar belakang gradien yang baru saja kita tambahkan:

Langkah 8: Tombol Putar dan Jeda

Selanjutnya kita akan menambahkan tombol putar dan jeda, bersama dengan pemisahnya. Saya akan menggunakan sprite untuk semua tombol, yang bisa Anda ambil di file sumber.

Saya pertama kali mendefinisikan lebar dan tinggi untuk tombol jeda dan putar, keduanya memiliki dimensi yang sama. Berikutnya saya telah menambahkan text-indent untuk mendorong teks di dalam tautan anchor dari layar karena kita tidak membutuhkannya, kita akan menggunakan gambar sprite. Akhirnya kita akan menggunakan outline:none; yang akan memperbaiki masalah saat mengklik, mencegah beberapa browser menampilkan cahaya biru mengerikan di sekitar tombol.


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

Langkah 9: Bilah Kemajuan

Oke, pertama kita akan menargetkan dasar bilah kemajuan. Kita akan memberikan latar belakang solid, tambahkan border-radius 5px (dengan awalan-awalannya), dua box-shadow, drop shadow dan inset shadow. Selanjutnya kita akan menambahkan beberapa lebar dan tinggi, keduanya fixed. Kita kemudian akan menambahkan beberapa margin-top hanya untuk memusatkannya di dalam seluruh antarmuka.

Selanjutnya kita akan menambahkan beberapa gaya untuk bilah pencarian yang menunjukkan berapa banyak video telah dimuat. Kita akan menerapkan lebar 0px karena jPlayer akan menangani lebar sebenarnya secara dinamis, dan ketinggian 100% sehingga akan mewarisi tinggi bilah kemajuan, mengisi semuanya. Kita juga akan memberikan border radius 5px dan sebuah latar belakang.

Terakhir kita akan membuat bilah kemajuan yang bergerak saat video diputar. Saya akan menggunakan gambar dan mengulanginya pada sumbu y. Sekali lagi, seperti sebelumnya kita akan menambahkan lebar 0px dan jPlayer akan menangani sisanya. Selanjutnya, ingat tag span yang kita buat? Ini akan digunakan untuk pegangan. Kita akan menggunakan gambar untuk ini juga, dan memposisikannya secara absolut. Kita harus menggunakan right:XXpx; untuk memastikannya bergerak bersama dengan bilah pemutaran.


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

Langkah 10: Waktu Saat Ini / Durasi

Waktunya untuk melakukan waktu (terkekeh) Serius, mari kita menata waktu dan durasi saat ini. Kita akan menargetkan mereka berdua terlebih dahulu untuk menerapkan beberapa gaya yang akan mereka bagikan. Sisanya adalah hal-hal mendasar seperti margin.


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

Langkah 11: Tombol dan Bilah Volume

Kita sudah hampir selesai sekarang, jadi mari kita menangani bagian volume. Kita membutuhkan dua tombol, yang mute dan unmute. Kita akan menerapkan beberapa gaya untuk keduanya dan kemudian sprite-nya ke masing-masing individu.

Perhatikan kita telah menggunakan outline:none; lagi untuk menghindari kondisi active yang bermasalah. Untuk membuat bilah volume kita akan menggunakan proses serupa dengan bilah kemajuan. Kita akan menerapkan lebar dan tinggi fixed, memberikannya latar belakang, beberapa box shadow dan border radius 5px. Bilah volume itu sendiri transparan sehingga kita tidak akan menerapkan latar belakang padanya. Selanjutnya kita memiliki tombol lain; menggunakan span lagi kita akan menerapkan gambar latar belakang, gunakan position:absolute; dan posisikan ke kanan sehingga akan bergerak dengan benar.


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

Langkah 12: Tombol Layar Penuh

Kita berada di langkah terakhir sekarang! Yang tersisa adalah tombol layar penuh. Dengan menggunakan langkah serupa seperti sebelumnya, kita akan menerapkan sprite lagi, gunakan text-indent untuk menyembunyikan teks (juga dikenal sebagai pushing-it-off-the-screen). Dan mengingat untuk menggunakan outline:none; lagi (yang diakui bisa diterapkan ke semua jangkar di awal stylesheet).


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

Dan pemutar video kita selesai!

Ukuran Layar Normal SelesaiSilakan coba fitur layar penuh, ini luar biasa!

Kesimpulan

Dengan menggunakan plugin jPlayer dan desain yang menyenangkan dari Orman, kita telah mengkodekan antarmuka pemutar video sempurna. Jangan lupa, jPlayer memiliki banyak trik lagi, jadi pastikan Anda memeriksa demo dan dokumentasinya. Saya harap Anda menikmati tutorial ini, terima kasih telah membaca.