Sebenarnya, cara membuat playlist ada 2 cara, yang pertama adalah cara manual playlist dan yang kedua adalah dengan cara internal playlist.
Berikut adalah membuat playlist dengan manual playlist:
- Karena kita akan membuat dengan server localhost, maka buatlah direktori pada server anda. Jika anda menggunakan wamp letakkan direktori pada “C:\wamp\www”.
- Download file flowplayer disini. Untuk flowplayer gratis, kita bisa klik link yang d tunjuk gambar berikut.
Tempatkan file download pada direktori yang anda buat tadi dan extrak file tersebut. Anda juga dapat menghapus file .zip yang anda extact td.
- Buatlah direktori baru di dalam direktori yang anda buat tadi, beri nama direktori anda dengan nama video. Dan kopikan file video anda kedalam direktori ini. Yang perlu diperhatikan adalah playlist ini hanya mendukung file video yang berformat FLV, MP4 dan MOV juga tergantung dengan plugin yang terinstal d browser anda.
- Buat direktori baru, beri nama js. Direktori ini digunakan untuk menyimpan java script yang dibutuhkan dalam pembuatan playlist. Download plugin java script flowplayer disini.
Klik file, save page as, berinama “flowplayer.playlist.js” karena file akan kita simpan dengan format java scrpt, jangan lupa mengetikkan “.js” di akhir.
Download juga jquery disini. Jangan lupa untuk mencentang semua seperti pada gambar.
Lalu klik download dan simpan di direktori ini.
NB: pembuatan folder ditujukan untuk merapikan workspace atau ruang kerja kita.
- Yang terakhir adalah download file css disini. pada plugin playlist dan taruh di luar direktori flowplayer, video, dan js. Seperti gambar berikut.
- Setelah semuanya sudah, buka text editor anda(notepad) saya menyarankan untuk mempunyai dreamweaver untuk memudahkan text editor html. Ketikkan kode berikut.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="playlist.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.tools.min.js"></script>
<script src="flowplayer/flowplayer-3.2.8.min.js"></script>
<script src="js/flowplayer.playlist.js"></script>
</head>
<body>
<style>
/* container has a background image */
a.player {
display:block;
width:500px;
height:340px;
text-align:center;
color:#fff;
text-decoration:none;
cursor:pointer;
background:#000 url(/media/img/global/gradient/h500.png)
repeat-x 0 0;
background:-moz-linear-gradient(top,
rgba(55, 102, 152, 0.9),
rgba(6, 6, 6, 0.9));
-moz-box-shadow:0 0 40px rgba(100, 118, 173, 0.5);
}
a.player:hover {
background:-moz-linear-gradient(center top,
rgba(73, 122, 173, 0.898),
rgba(6, 6, 6, 0.898));
}
/* splash image */
a.player img {
margin-top:125px;
border:0;
} a.player {
margin-top:0px;
}
</style>
<!-- configure entries inside playlist using standard HTML -->
<div class="clips petrol" style="float:left">
<!-- single playlist entry -->
<a href="futsal.flv" class="first">
<!—nama file tergantung nama file anda-->
Video Futsal
<span>HTTP streaming</span>
<em>0:20 min</em>
</a>
<a href="video.mp4">
Demo
<span>HTTP streaming</span>
<em>0:20 min</em>
</a>
</div>
<!-- player container and a splash image (play button) -->
<a class="player plain" id="player2" style="float:left">
<img class="button" src="play_text_large.png" />
</a>
<!-- let rest of the page float normally -->
<script>
$f("player2", "flowplayer/flowplayer-3.2.9.swf", {
clip: {baseUrl: 'http://localhost/belajar-playlist/video'}
// base url tergantung pada direktori mana anda menaruh video.
// use playlist plugin. again loop is true
}).playlist("div.petrol", {loop:true});
</script>
<br clear="all"/>
</body>
</html>
Dalam playlist akan memutar video secara terus menerus dan berurutan. Jika anda tidak menghendaki demikian, maka anda dapat mengaturnya dengan cara cari potongan kode “}).playlist("div.petrol", {loop:true});” ganti nilai “true” menjadi “false”.