A. Objek Multimedia
Multimedia pada halaman web memiliki
pengertian penggunaan external file yang berisi data dengan format tertentu
pada web. Objek multimedia pada web dapat berupa audio, video, musik, gambar,
animasi, maupun file lainnya yang bertujuan untuk membuat web menjadi lebih
atraktif, menarik dan mudah digunakan. Terdapat beberapa fungsi dalam
pemrograman web yang harus didukung web browser, yaitu sbg berikut.
1.
Fungsi dukungan terhadap scripting, agar web
browser mampu menjalankan dan menerjemahkan kode yg dituliskan dalam badan
program program HTML.
2.
Applet merupakan program aplikasi yang
dijalankan pada browser untuk mengeksekusi objek multimedia yang disertakan
pada halaman web agar berfungsi dan bekerja semestinya. Pada generasi web
browser terbaru tag <applet> sudah tidak digunakan lagi tetapi diganti
dengan penggunaan tag <object>.
Contoh penggunaan tag <object> :
<object code=”namaclassapplet.class”>
<param name=”namaparam”
value=”nilaiparam”>
</object>
3.
Plug in, yaitu program tambahan pada web browser
untuk menjalankan berbagai file multimedia yang disertakan pada halaman web.
Plug in pada setiap browser tidak sama sehingga hasil tampilan, kecepatan, dan
model halaman web yang dihasilkan tiap web browser juga berbeda.
4.
ActiveX merupakan komponen standar yang
disediakan sistem operasi windows untuk mendukung beberapa fungsi dalam web
browser khususnya internrt explorer seperti teknik menampilkan kalender. Namun,
tidak semua kode program activeX yg ditulis dalam HTML file akan dapat
dieksekusi oleh web browser.
B. Objek Gambar
Gambar merupakan salah satu jenis objek
multimedia yang sering dijadikan komponen pembentuk dalam halaman web.
Fungsinya untuk mempercantik tampilan dan membuat halaman web lebih menarik.
1)
JPG/JPEG
JPG atau Joint Photographic Group dan JPEG (Joint Photographic Expert
Group) merupakan salah satu jenis file gambar dengan resolusi tinggi pada mode
warna RGB, CMYK, dan garyscale. Kelemahan file gambar jenis ini adalah rincian
komponen gambar menjadi kabur (blur) karena proses kompresi file yang terlalu
banyak.
2)
GIF
GIF atau Graphic Interchange Format hanya mampu menyimpan gambar dalam
format 8bit. Format GIF biasanya digunakan untuk menampilkan animasi 2 dimensi
hasil kompilasi flash. Kelemahan GIF yaitu hanya mampu menampilkan 256 jenis
warna sehingga kurang bagus untuk dijadikan ekstensi gambar hasil fotografi
kamera dan juga gambar yang dihasilkan memiliki ketajaman yang rendah.
3)
PNG
Portable Network Graphic merupakan salah satu bentuk file gambar yang
menggabungkan teknik JPG dan GIF yg mampu menyimpan file dengan bit depth
hingga 24bit. Kelemahan file gambar berekstensi PNG adalah kapasitas file yang
cukup besar dibanding dengan jenis JPG.
4)
BMP
Atau Bitmap Image adalah jenis format file yang mamapu menyimpan gambar dengan
tingkat kualitas 1 hingga 24bit (warna RGB, grayscale, indexed color, dan
bitmap). Kelemahan file jenis ini adalah tidak dapat menyimpan dalam mode alpha
channel.
Untuk dapat menampilkan sebuah gambar dengan ekstensi .jpg tau .jpeg,
.png atau .gif dapat menggunakan fungsi tag <img src=”lokasi_file”>.
Contoh penggunaan tag tersebut :
<!--
file apasaja.html-->
<html>
<head>
<title>menampilkan gambar dengan tag
img</title>
</head>
<body>
<img src=”motherboard.jpg” width=”400”
height=”300”>
</body>
</html>
1)
Scr=”motherboard.jpg”, yaitu merujuk lokasi file
gambar motherboard.jpg, dengan file yang berada satu folder dengan file html.
2)
Width=”400”, mengatur dimensi lebar gambar
sebesar 400 pixel
3)
Height=”300”, yaitu mengatur dimensi tinggi
gambar sebesar 300 pixel
Contah menampilkan gambar dengan tag <object>
<!—file apasaja.html -->
<html>
<head>
<title>menampilkan gambar dengan tag
object</title>
</head>
<body>
<object data=”motherboard.jpg”
type=”image/jpg” width=”600” height=”400”>
</object>
</body>
<html>
1)
Data=”motherboard.jpg”, yaitu menunjukkan lokasi
file gambar yang dipanggil sebagai objek multimedia pada halaman web.
2)
Type=”image/jpg”, perintah type menunjukkan
jenis objek yang dipanggil dalam halaman web.
3)
Width=”600” untuk menentukan dimensi lebar objek
sebesar 600 pixel.
4)
Height=”400” yaitu menentukan dimensi tinggi
objek sebesar 400 pixel.
C. Objek Suara
Penambahan objek suara pada halaman web
dapat dilakukan dengan menambahkan tag <object> dan menuliskan lokasi
file dari audio yg akan dimainkan. Pada dasarnya ada 3 kategori format file
audio, yaitu :
1)
File audio tanpa kompresi, yaitu file dengan
ekstensi AIFF, AU, WAV, dan raw header-less PCM.
2)
File audio dengan kompresi lossy, seperti
vorbis, ACC, ATRAC, MP3, mousepack dan lossy windows media audio (WMA)
3)
File audio dengan kompresi lossless, seperti
MPEG-4 SLS, MPEG-4 ALS, MPEG-4 DST, TTA, windows media audio lossless (WMA
lossless), FLAC, dan WavPack (file name extension WV).
File audio dalam halaman web memiliki
beberapa tipe, antara lain sbg berikut.
1)
MPEG (Mp3)
Moving Picture Experts Group merupakan format file audio dengan ekstensi .mp3 yang bekerja pada layer tiga dengan kompresi audio mencapai kualitas setara CD stereo, yaitu 16-bit
Moving Picture Experts Group merupakan format file audio dengan ekstensi .mp3 yang bekerja pada layer tiga dengan kompresi audio mencapai kualitas setara CD stereo, yaitu 16-bit
2)
WAV
Waveform Audio Format adalah standar file yang tidak melakukan kompresi terhadap isi audionya.
Waveform Audio Format adalah standar file yang tidak melakukan kompresi terhadap isi audionya.
3)
AAC
Advanced Audio Coding merupakan file audio dengan format berbasis MPEG2 dan MPEG4 sebagai pengembangan file mp3.
Advanced Audio Coding merupakan file audio dengan format berbasis MPEG2 dan MPEG4 sebagai pengembangan file mp3.
4)
AIFF
Audio Interchange File Format adalah format standar audio tanpa kompresi untuk sistem operasi macintosh.
Audio Interchange File Format adalah format standar audio tanpa kompresi untuk sistem operasi macintosh.
5)
Audio CD
format standar Audio CD memiliki ekstensi file .cda dan merupakan mode audio yang dapat diputar secara langsung dari CD-drive komputer tetapi ketika disalin kedalam hardisk, file audio CD tidak dpt dijalankan.
format standar Audio CD memiliki ekstensi file .cda dan merupakan mode audio yang dapat diputar secara langsung dari CD-drive komputer tetapi ketika disalin kedalam hardisk, file audio CD tidak dpt dijalankan.
6)
MIDI
Music Instrument Digital Interface merupakan sebuah standar format audio berbagai software dan hardware yg berkembang saat ini. File standar MIDI biasanya digunakan untuk menyimpan hasil intruksi perangkat musik.
Music Instrument Digital Interface merupakan sebuah standar format audio berbagai software dan hardware yg berkembang saat ini. File standar MIDI biasanya digunakan untuk menyimpan hasil intruksi perangkat musik.
7)
WMA
Windows Media Audio adalah salah satu jenis format audio yang dikembangkan oleh microsoft
Windows Media Audio adalah salah satu jenis format audio yang dikembangkan oleh microsoft
8)
OGG
merupakan salah satu jenis format file audio sekaligus video dengan lisensi bebas atau oper source
merupakan salah satu jenis format file audio sekaligus video dengan lisensi bebas atau oper source
Ada beberapa syarat yang harus dipenuhi untuk menjalankan audio file
dengan script pemrograman html, yaitu sbg berikut.
·
Web browser yang digunakan harus versi terbaru,
dengan plug in dan extension sudah ter-update
·
Pada beberapa kondisi, diperlukan kondisi
internet untuk menjalankan program tersebut.
·
Sediakan file audio dengan beberapa format
tertentu
·
Buatlah folder yang menampung file hasil
pemrograman tersebut, kemudian pindahkan file audio tersebut kedalam satu
folder dengan file HTML.
Terdapat beberapa teknik memasukkan file
audio kedalam halaman web menggunakan pemrograman HTML, yaitu sbg berikut.
1) Menggunakan Yahoo Media Player
contoh memainkan musik dengan yahoo media player :
<!--file apasaja.html>
<html>
<head>
<title>musik dengan yahoo media player/title>
</head>
<body>
<!—memanggil yahoo media player -->
<a href=”1.mp3”>mainkan musik</a>
<script type=”text/javascript” src=http://mediaplayer.yahoo.com/js>
</script>
<!—akhir script-->
</body>
</html>
contoh memainkan musik dengan yahoo media player :
<!--file apasaja.html>
<html>
<head>
<title>musik dengan yahoo media player/title>
</head>
<body>
<!—memanggil yahoo media player -->
<a href=”1.mp3”>mainkan musik</a>
<script type=”text/javascript” src=http://mediaplayer.yahoo.com/js>
</script>
<!—akhir script-->
</body>
</html>
2) Menggunakan plug in elemen <object>
Langkah yg harus dilakukan sbg berikut.
·
Persiapkan file audio yang akan disisipkan pada halaman
web
·
Salin file tersebut kedalam folder yg sma dengan
file HTML yang akan dibuat nantinya
·
Ubah nama file tersebut menjadi 1.mp3 untuk
memudahkan proses pemanggilannya
·
Selanjutnya, buat file HTML dengan script
seperti contoh
Contoh memutan file audio dengan elemen object
<!—apasaja.html-->
<html>
<head>
<title>memutar lagu</title>
</head>
<body>
<object data=”1.mp3”>
</object>
</body>
</html>
3) Menggunakan elemen <audio>
menggunakan tag <audio> dan menambahkan kode <!DOCTYPE HTML> pada awal program html
contohnya :
<!—fileapasaja.html-->
<! DOCTYPE HTML>
<html>
<head>
<title>memainkan musik dengan audio plugin</title>
</head>
<body>
<!—memanggil elemen <audio>-->
<audio controls=”controls” height=”70px” width=”100px”>
<source src=”1.mp3” type=”audio/mpeg”>
</audio>
<!—akhir elemen <audio>-->
</body>
</html>
menggunakan tag <audio> dan menambahkan kode <!DOCTYPE HTML> pada awal program html
contohnya :
<!—fileapasaja.html-->
<! DOCTYPE HTML>
<html>
<head>
<title>memainkan musik dengan audio plugin</title>
</head>
<body>
<!—memanggil elemen <audio>-->
<audio controls=”controls” height=”70px” width=”100px”>
<source src=”1.mp3” type=”audio/mpeg”>
</audio>
<!—akhir elemen <audio>-->
</body>
</html>
4) Menggunakan elemen <embed>
menggunakan tag <embed>
contohnya :
<!-- file apasaja.html>
contohnya :
<!-- file apasaja.html>
<html>
<head>
<title>Hidden object</object>
</head>
<object classid=”1.mp3”
codetype=”application/java”>
<param name=”src” value=”1.mp3”>
<embed src=”1.mp3” hidden=”true”
loop=”true”></embed>
</object>
</body>
</body>
</html>
·
Src=”1.mp3” digunakan untuk merujuk lokasi file
audio yang dipanggil oleh halaman web ketika diakses oleh web browser.
·
Hidden=”true” digunakan untuk menyembunyikan
active object yang sedang berjalan sehingga tampak pada halaman web ketika
diakses.
·
Loop=”true” atribut loop jika bernilai true
menyebabkan file audio akan diputar berulang-ulang selama halaman web diakses.
5) Inline Sound
menggunakan tag <bgsound>
contohnya
<!—file apasaja.html>
<!DOCTYPE HTML>
<html>
<head>
<title>memainkan musik dengan bgsound</title>
</head>
<body>
<!—memanggil elemen <bgsound>-->
<bgsound src=”1.mp3” loop=”1”>
<!—akhir elemen <bgsound>-->
</body>
</html>
menggunakan tag <bgsound>
contohnya
<!—file apasaja.html>
<!DOCTYPE HTML>
<html>
<head>
<title>memainkan musik dengan bgsound</title>
</head>
<body>
<!—memanggil elemen <bgsound>-->
<bgsound src=”1.mp3” loop=”1”>
<!—akhir elemen <bgsound>-->
</body>
</html>
6) Hyperlink Sound
menggunakan tag <a href=”namafile”>
contonya :
<!—file apasaja.html>
<html>
<head>
<title>hyperlink file audio</title>
</head>
<body>
<a href=”1.mp3”>
putar musik
</a>
</body>
</html>
menggunakan tag <a href=”namafile”>
contonya :
<!—file apasaja.html>
<html>
<head>
<title>hyperlink file audio</title>
</head>
<body>
<a href=”1.mp3”>
putar musik
</a>
</body>
</html>
D. Objek Video
Objek multimedia berupa video merupakan
perpaduan antara gambar, gerak, dan suara yang tersusun dalam frame-frame yang
membentuk pla tertentu secara tepat. Terdapat beberapa jenis format standar
video yang dapat disisipkan pada halaman web, yaitu sbg berikut.
1)
MPEG
Moving Picture Expert Group adalah format file audio dan video yang saat ini menjadi standar kompresi file dengan kualitas baik
Moving Picture Expert Group adalah format file audio dan video yang saat ini menjadi standar kompresi file dengan kualitas baik
2)
AVI
Audio Video Interleaved merupakan format audio video buatan microsoft dengan kualitas dan ketajaman gambar dan suara lebih baik dari standar audio video ASF
Audio Video Interleaved merupakan format audio video buatan microsoft dengan kualitas dan ketajaman gambar dan suara lebih baik dari standar audio video ASF
3)
MWV
merupakan salah satu standar audio video yang dikeluarkan microsoft untuk komputer berbasis windows
merupakan salah satu standar audio video yang dikeluarkan microsoft untuk komputer berbasis windows
4)
MP4
merupakan generasi baru dari MP3 dengan dukungan audio dan video yang lebih baik
merupakan generasi baru dari MP3 dengan dukungan audio dan video yang lebih baik
5)
Real Video
tipe file ini sering digunakan sebagai standar video streaming seperti tv online dsb.
tipe file ini sering digunakan sebagai standar video streaming seperti tv online dsb.
6)
QuickTime
merupakan standar format audio video keluaran MacOS untuk Apple
merupakan standar format audio video keluaran MacOS untuk Apple
7)
3GP
merupakan salah satu generasi terbaru format file audio video ringan, kecil ukurannya, serta didukung berbagai peranti keras, khususnya telepon genggam
merupakan salah satu generasi terbaru format file audio video ringan, kecil ukurannya, serta didukung berbagai peranti keras, khususnya telepon genggam
8)
Flash
merupakan standar format audio video keluaran macromedia
merupakan standar format audio video keluaran macromedia
Terdapat beberapa teknik yang dapat
digunakan untuk menjalankan video pada halaman web, seperti berikut.
1)
Menggunakan Elemen <img>
contohnya :
<!-- file apasaja.html-->
<html>
<head>
<title>manjalankan video dengan tag img</title>
</head>
<body>
<img dynsrc=”1.mp4”>
</body>
</html>
contohnya :
<!-- file apasaja.html-->
<html>
<head>
<title>manjalankan video dengan tag img</title>
</head>
<body>
<img dynsrc=”1.mp4”>
</body>
</html>
2)
Menggunakan Elemen <embed>
contoh scriptnya hampir sama dengan yg menggunakan tag img
contoh scriptnya hampir sama dengan yg menggunakan tag img
3)
Menggunakan Elemen <video>
contohnya :
<!-- file apasaja.html-->
<!DOCTYPE HTML>
<html>
<head>
<title>menjalankan video dengan tag video</title>
</head>
<body>
<video width=”420” controls=”controls”>
<source src=”1.mp4” type=”video/mp4”>
<source src=”1.mkv” type=”video/mkv”>
<source src=”1.3gp” type=”video/3gp”>
<source src=”1.flv” type=”video/mp4”>
<!-- jika ketiga file tidak bisa dijalankan, maka muncul pesan kegagalan seperti dibawah -->
browser anda belum mendukung HTML5
</video>
</body>
</html>
contohnya :
<!-- file apasaja.html-->
<!DOCTYPE HTML>
<html>
<head>
<title>menjalankan video dengan tag video</title>
</head>
<body>
<video width=”420” controls=”controls”>
<source src=”1.mp4” type=”video/mp4”>
<source src=”1.mkv” type=”video/mkv”>
<source src=”1.3gp” type=”video/3gp”>
<source src=”1.flv” type=”video/mp4”>
<!-- jika ketiga file tidak bisa dijalankan, maka muncul pesan kegagalan seperti dibawah -->
browser anda belum mendukung HTML5
</video>
</body>
</html>
4)
Menggunakan hyperlink
contohnya :
<!-- file apasaja-->
<html>
<head>
<title>menjalankan video dengan hyperlink</title>
</head>
<body>
<a href=”1.mp4”>
mainkan video
</a>
</body>
</html>
contohnya :
<!-- file apasaja-->
<html>
<head>
<title>menjalankan video dengan hyperlink</title>
</head>
<body>
<a href=”1.mp4”>
mainkan video
</a>
</body>
</html>
5)
Menggunakan elemen <object>
contohnya :
<object data=”1.mp4” type=”video/mp4”>
<embed erc=”1.mp4” width=”400” height=”320”></embed>
</object>
6)
Menjalankan aplikasi flashcontohnya :
<object data=”1.mp4” type=”video/mp4”>
<embed erc=”1.mp4” width=”400” height=”320”></embed>
</object>
contoh script memutar animasi flash .swf
<!-- file apasaja.html>
<html>
<head>
<title>memutar animasi swf flash</title>
</head>
<body>
<object classid=”clsid: D27CDB6E-AE6D-11cf-96B8-444553540000” codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6, 0, 29, 0 widht=”170” height=”140”>
<param name=”movie” value=”kabel.swf”>
<param name=”quality” value=”high”>
<embed src=”kabel.swf” quality=”high” pluginspage=http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”170” height=”140”>
</embed></object>
</body>
</html>
