Multimedia Pada Halaman Web

Multimedia Pada Halaman Web

 Multimedia Pada Halaman Web

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>