Multimedia
Multimedia pada web adalah:
Sound
Musik
video
animasi
Web browser modern telah mendukung
Apakah 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
Format Multimedia
Elemen multimedia (seperti sound atau
video) disimpan dalam file media dengan
ekstensi:
.swf,
.wmv,
.mp3,
.mp4,
dll
Format Multimedia (lanjutan)
Format File Deskripsi
AVI .avi Format AVI (Audio Video Interleave) dikembangkan oleh
Microsoft. Didukung oleh Windows, dan mayoritas web browser. Tidak selalu bisa dimainkan pada komputer non-Windows.
WMV .wmv Format Windows Media format dikembangkan oleh Microsoft. Tidak dapat dimainkan pada komputer non-Windows computer tanpa komponen tambahan.
MPEG .mpg
.mpeg Format MPEG (Moving Pictures Expert Group) paling populer pada Internet. Bersifat cross-platform, dan didukung oleh semua web browser populer.
QuickTime .mov Format QuickTime dikembangkan oleh Apple. Tidak dapat
dimainkan pada komputer Windows tanpa komponen tambahan. RealVideo .rm
.ram
Format RealVideo dikembangkan oleh Real Media. Mengijinkan video streaming video (on-line video, Internet TV) dengan low bandwidth. Karena diprioritaskan low bandwidth , resikonya diturunkan kualitasnya.
Flash .swf
.flv Format Flash (Shockwave) dikembangkan oleh Macromedia. Membutuhkan komponen tambahan, tetapi sudah preinstalled dalam web browsers seperti Firefox dan Internet Explorer.
Format Sound
Format File Description
MIDI .mid .midi
MIDI (Musical Instrument Digital Interface) adalah format untuk electronic music devices seperti synthesizers dan PC sound card. File MIDI tidak mencakup sound, tetapi digital musical instructions (notes) yg dpt dimainkan oleh sound card PC.
RealAudio .rm .ram
Format RealAudio dikembangkan oleh Real Media. Mendukung video. Mengijinkan video streaming video (on-line music, Internet radio)
dengan low bandwidth. Karena diprioritaskan low bandwidth , resikonya diturunkan kualitasnya.
Wave .wav Format wave (waveform) dikembangkan oleh IBM dan Microsoft. Didukung oleh komputer Windows, dan semua web browser populer (kecuali Google Chrome).
WMA .wma Format WMA (Windows Media Audio), kualitas seperti MP3, dan
compatible dengan kebanyakan player. File WMA sering dipakai dalam Internet radio atau on-line music.
MP3 .mp3 .mpga
File MP3 merupakan bagian suara dari file MPEG. Merupakan salah satu format paling polpuler untuk musik. Sistem encoding mengkombinasikan kompresi yang baik (file kecil) dengan kualitas tinggi.
Suara Audio
Suara dapat dimainkan dalam HTML
dengan banyak cara.
Cara mudah menggunakan Yahoo Media
Player:
<a href="song.mp3">Play Song</a> <script type="text/javascript“
src="http://mediaplayer.yahoo.com/js"> </script>
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
Memainkan audio menggunakan
Plugin
<audio controls="controls" height="50px" width="100px"> <source src="song.mp3" type="audio/mpeg" />
<source src="song.ogg" type="audio/ogg" />
<embed height="50px" width="100px" src="song.mp3" /> </audio>
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" />
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>
Tiga format utama untuk elemen audio
Format IE 9 Firefox
3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis No Yes Yes Yes No
MP3 Yes No No Yes Yes
Wav No Yes Yes Yes Yes
Persoalan:
•Anda harus mengkonversi video kedalam banyak format. •Elemen <audio> tidak bekerja pada browser lama.
Solusi terbaik
<audio controls="controls" height="50px width="100px">
<source src="song.mp3" type="audio/mpeg" /> <source src="song.ogg" type="audio/ogg" />
<embed height="50px width="100px" src="song.mp3" /> </audio>
Contoh ini menggunakan 4 format audio berbeda. Elemen HTML 5
<audio> mencoba memainkan audio baik ogg atau mp3. Jika gagal, kode mencoba ke elemen <embed>. Jika gagal juga, akan
menampilkan error.
Masalah:
Anda harus mengkonversi audio kedalam beberapa format.
Elemen <audio> tidak memvalidasi dalam HTML 4 dan XHTML. Elemen <embed> tidak memvalidasi dalam HTML 4 dan XHTML.
Menggunakan Yahoo Media Player
Yahoo player is free. Untuk menggunakan tinggal sisipkan kode JavaScript
pada bagian bawah halaman web: <script type="text/javascript"
src="http://mediaplayer.yahoo.com/js"></script>
Kemudian lakukan link ke file MP3 daalam HTML, dan kode JavaScript
otomatis menciptakan tombol play untuk setiap lagu: <a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a> <script type="text/javascript"
src="http://mediaplayer.yahoo.com/js"> </script>
Menggunakan Google
<a href="song.mp3">Play Song</a>
<embed type="application/x-shockwave-flash"
wmode="transparent"
src="http://www.google.com/reader/ui/352369
7345-audio-player.swf?audioUrl=song.mp3"
height="27" width="320">
</embed>
Menggunakan Hyperlink
Jika 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:
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>
Memainkan
MP4 Video
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="movie.mp4" />
<param name="controller" value="true" />
</object>
Memainkan Video
SWF Menggunakan Flash
<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0 ,0">
<param name="SRC" value="bookmark.swf"> <embed src="bookmark.swf" width="400" height="40"></embed>
Memainkan
WMV Movie Menggunakan
Windows Media Player
<object width="100%" height="100%"
type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> <param name="url" value="3d.wmv">
<param name="filename" value="3d.wmv"> <param name="autostart" value="1">
<param name="uiMode" value="full" /> <param name="autosize" value="1"> <param name="playcount" value="1">
<embed type="application/x-mplayer2" src="3d.wmv" width="100%" height="100%" autostart="true"
showcontrols="true"
pluginspage="http://www.microsoft.com/Windows/MediaPlay er/"></embed>
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>
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"
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"
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 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>