Semua sudah mengetahui untuk menyisipkan media dalam sebuah situs, perintahnya <embed.
Masalahnya, media yang di attach selalu langsung diputar saat situs dibuka dan ini membuat
situs lama terbuka. Selain itu, kesulitan lainnya adalah lagu yang diputar itu-itu aja dan harus
diganti secara manual oleh webmaster.
Nah, sekarang kita akan membuat sebuah embed media untuk situs yang tidak langsung diputar
saat halaman dibuka dan juga mampu menyediakan lagu untuk dipilih lebih dari satu.
Langsung saja...
Yang diperlukan :
-Pengetahuan dasar html
-Logika yang cukup
-Microsoft Frontpage (SUPAYA ANDA LEBIH MUDAH MENGERTI)
Pertama-tama, tentukan media yang anda inginkan untuk diembed lebih dari satu. Dalam hal ini
mari kita gunakan MP3. Sudah? Oke, sekarang, embedlah lagu-lagu tersebut secara terpisah,
dan namakan sesuai nomor.
contoh :
lagu a = 1.htm
lagu b = 2.htm
lagu c = 3.htm
Dimana, anda harus membuat di tiap halaman, file yang diembed disembunyikan, dengan besar
1x1pix. Jangan lupa beri text pada tiap halaman yang diembed informasi mengenai lagu yang
diembed pada halaman tersebut.
Untuk lebih jelasnya, berikut kode satu halaman yang diembed :
<html>
<head><title>EMBED1</title></head>
<body>
<embed src="1.mp3" width="1" height="1" hidden>
<marquee width="145">lagu no satu neeeh....</marquee>
</body></html>
Disana bisa dilihat bahwa file yang diembed adalah "1.mp3" dengan tinggi 1 dan lebar 1 dan
disembunyikan dengan atribut "hidden>". Kemudian terdapat pula informasi mengenai lagu
yang saya embed yaitu "<marquee width="145">lagu no satu neeeh....</marquee>"
Jika anda menggunakan frontpage, kopi paste saja kode diatas di bagian HTML.
Kemudian, bukatlah sebuah file html yang baru, yang didalamnya tertulis "lagu tidak diputar",
dan beri nama file tersebut : "lagutidakdiputar.htm" (tanpa tanda kutip)
Setelah semuanya diembed dengan nama yang berbeda beda, sekarang kita akan membuat
playernya. Player ini bisa terdepat di index.htm situs anda atau di halaman baru, itu semua
terserah ente brur...!
Player sendiri terdiri dari link-link yang menghubungkan player dengan halaman dari lagu yang
sudah diembed tadi dengan menggunakan fitur yang disebut INLINE FRAME.
oke, kita anggap, halaman dimana lagu diembed tadi berjumlah tiga buah.
Yang perlu dilakukan adalah menyiapkan sebuah halaman dengan tiga link dengan target inline
frame dan sebuah inline frame... ADUUHH Susyah ngomongnya, langsung saja dilihat kode
berikut :
<html>
<head>
<title>Player</title>
</head>
<body>
<a title="LAGU SATU" target="playsong" style="text-decoration: none; font-weight:
700" href="1.htm">1</a>
<a title="LAGU DUA" target="playsong" style="text-decoration: none; font-weight:
700" href="2.htm">2</a>
<a title="LAGU TIGA" target="playsong" style="text-decoration: none; font-weight:
700" href="3.htm">3</a>
<p>
<iframe name="playsong" src="lagutidakdiputar.htm" scrolling="no" border="0"
frameborder="0">
BROWSER ANDA JELEK JADI GA BISA PAKEK INLINE FRAME, SEGERA GANTI
BROWSER ANDA.</iframe>
</p>
</body>
</html>
Mari kita membedah ini terlebih dahulu :
<a title="LAGU SATU" target="playsong" style="text-decoration: none; font-weight:
700" href="song1.htm">1</a>
title="lagu satu" adalah titel dari link, sekaligus screen tip. Screen tip adalah pesan kecil yang
keluar pada saat mouse kita mengenai sebuah link. Jika anda masih bingung mengenai ini,
silahkan belajar ulang html.
target="playsong" playsong sendiri adalah nama dari inline frame yang kita bikin.
href="1.htm" adalah nama halaman yang akan ditampilkan pada inline frame.
>1</a> adalah nama link (pasti anda tahu...)
Secara keseluruhan, link diatas berarti :
"Hey browser! Nama saya link 1 dan tolong bukakan halaman bernama 1.htm HANYA di
bagian yang sudah saya beri nama playsong yang berupa inline frame!!!"
Harap diingat, tehnik penulisan kode link untuk inline frame BERBEDA dengan link biasa yang
hanya menggunakan <a href="TARGET">NAMA_LINK</a>
Dibawahnya kita bisa menemukan kode :
<iframe name="playsong" src="lagutidakdiputar.htm">
BROWSER ANDA JELEK JADI GA BISA PAKEK INLINE FRAME, SEGERA GANTI
BROWSER ANDA.</iframe></p>
Ini adalah kode dari inline frame yang bernama playsong tersebut. Secara default, inline frame
memiliki border dan scrollbar, tapi saya matikan dengan menggunakan perintah no dan 0
(scrolling="no" border="0" frameborder="0"). Juga, anda lihat disana terdapat
src="lagutidakdiputar.htm">. Ini adalah halaman yang secara default ditampilkan saat
halaman player diakses sehingga lagu tidak langsung diputar. Itulah sebabnya tadi saya suruh
anda untuk membuat sebuah halaman tanpa embed. Apa? saya tidak menyuruh? Silahkan scroll
up.
sedangkan tulisan "BROWSER ANDA JELEK JADI GA BISA PAKEK INLINE FRAME,
SEGERA GANTI BROWSER ANDA." Adalah pesan untuk mereka yang tidak support inline
frame.
Savelah dengan nama player.htm
catatan :
! JIKA ANDA MENGGUNAKAN HALAMAN INDEX SITUS ANDA SEBAGAI PLAYER,
JANGAN SERTAKAN TAG HTMLNYA. MASUKKAN SAJA KODE-KODE YANG
TERDAPAT antara BAGIAN <body> dan </body>.
! UNTUK MEMBUAT INLINE FRAME DI MICROSOFT FRONTPAGE, Klik insert, dan klik
insert inline frame. Selebihnya anda bisa mengaturnya sesuai kehendak anda.
! Anda bisa membuat tombol stop. Caranya, script linknya, diarahkan ke halaman
LAGUTIDAKDIPUTAR.HTM. Logikanya, saat seseorang mengklik tombol stop saat lagu
berjalan, dia akan dilemper kembali ke halaman yang tidak memiliki lagu.
oke, sekarang save-lah semua halaman html dan mp3-mp3 yang diembed pada sebuah folder
yang sama, kemudian jalankan player.htm. Saat di buka, tidak ada lagu satupun yang keluar,
sedangkan saat anda mengklik tulisan "1" lagu nomor satu akan diputar dan seterusnya.
Jangan lupa, tambahkan mp3 dan rename mp3 tersebut karena tidak saya sertakan.
Versi ini adalah yang paling sederhana, bisa anda buat gui dan sebagainya, kemudian anda
kembangkan sesuai keinginan anda.
Fitur tersebut memiliki dasar yang sama dengan yang saya terangkan diatas, yaitu mengubah
halaman pada inline frame.
Sekian tutorial kali ini, jika dasar perpindahan halaman sudah anda kuasai, anda dapat membuat
variasi yang berbeda-beda.
Anda baru saja membaca artikel yang berkategori dengan judul Tutorial Membuat Media Player HTML. Anda bisa bookmark halaman ini dengan URL http://bigblazzer.blogspot.com/2013/03/tutorial-membuat-media-player-html.html. Terima kasih!
Ditulis oleh:
Unknown - Sunday, March 3, 2013
Belum ada komentar untuk "Tutorial Membuat Media Player HTML"
Post a Comment