Multimedia
pada web adalah:
-
Sound
-
Musik
-
video
-
animasi
Web
browser modern telah mendukung sejumlah format multimedia
·
Multimedia mempunyai banyak
format berbeda.
·
Multimedia berupa sesuatu
yang dapat didengar atau dilihat.
·
Contohnya: teks, gambar,
musik, suara, video, film, animasi, dan lainnya.
·
Pada Internet sering kita
lihat elemen multimedia ditempelkan pada halaman web.
Menggunakan
Plugin
·
Plugin adalah program kecil
yang memperluas fungsionalitas standar pada web browser.
·
Plugin dapat digunakan untuk
bermacam-macam tujuan: memainkan musik, menampilkan peta, verivikasi bank id,
dan lain-lain.
·
Plugin dapat ditambahkan ke
halaman HTML menggunakan tag <object> atau <embed>.
Menggunakan
elemen <embed>
·
Tujuan tag embed> untuk
menempelkan elemen multimedia kedalam halaman HTML.
·
Untuk memainkan file MP3
yang ditempelkan dalam halaman web:
<embed
height="50px" width="100px" src="song.mp3" />
Catatan:
Tag <embed> tidak terdapat pada HTML 4.
Menggunakan elemen
<audio>
Elemen
<audio> merupakan elemen HTML 5, tidak terdapat pada HTML 4, tetapi
bekerja pada browser-browser baru.
<audio
controls="controls">
<source
src="song.mp3" type="audio/mpeg" />
<source
src="song.ogg" type="audio/ogg" />
Your
browser does not support this audio
</audio>
Menggunakan Google
<a
href="song.mp3">Play Song</a>
<embed
type="application/x-shockwave-flash"
wmode="transparent"
src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=song.mp3"
height="27" width="320">
</embed>
Menggunakan
Hyperlink
ika
halaman web menggunakan hyperlink ke file media, kebanyakan browser akan
menggunakan "helper application" untuk memainkan file.
Kode
berikut menampilkan link ke file MP3. Jika user mengklik link, browser akan
membuka helper application untuk memainkan file:
<a
href="song.mp3">Play the song</a>
Elemen Object HTML
Tujuan elemen <object>
adalah untuk mendukung HTML helpers (Plug-Ins)
Helper application adalah
program yang dapat dimuat oleh browser untuk “membantu". Helper application
disebut juga Plug-Ins.
Helper application dapat
digunakan untuk memainkan audio dan video (dan lainnya). Helper application
dimuat menggunakan tag <object>.
Keuntungan
menggunakan helper application untuk memainkan video dan audio, adalah seting
player (rewind, pause, stop dan play) dapat dikontrol user.
Memainkan
Wave Audio menggunakan QuickTime
<object
width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param
name="src" value="liar.wav" />
<param
name="controller" value="true" />
</object>
HTML
Video
Video
dapat dimainkandalam HTML bermacam-macam cara
<video
width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" /> <source
src="movie.ogg" type="video/ogg" /> <source
src="movie.webm" type="video/webm" /> <object
data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320"
height="240" /> </object>
</video>
Tag <embed>
Tujuan
tag <embed> untuk menempelkan elemen multimedia kedalam halaman HTML .
Kode
HTML berikut menampilkan Flash video yang di-embedded kedalam halaman web:
<embed
src="intro.swf" height="200" width="200"/>
Menggunakan
Tag <object>
Tujuan
tag <object> untuk menempelkan elemen multimedia kedalam halaman HTML .
Kode
HTML berikut menampilkan Flash video yang di-embedded kedalam halaman web:
<object
data="intro.swf" height="200" width="200"/>
Menggunakan
Tag <video>
Elemen <video> adalah
baru dalam HTML 5
Tujuan tag <video>
untuk menempelkan elemen multimedia kedalam halaman HTML .
Kode HTML berikut
menampilkan video dalam format ogg, mp4, atau webm yang di-embedded kedalam
halaman web:
<video
width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" /> <source
src="movie.ogg" type="video/ogg" /> <source
src="movie.webm" type="video/webm" /> Your browser does
not support the video tag. </video>
Video
YouTube
Jika
anda ingin memainkan video, anda dapat meng-upload video ke YouTube dan
menyisipkan kode HTML untuk memainkan video kedalam halaman web anda.
<iframe width="420"
height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k"> </iframe>