HTML MULTIMEDIA

HTML MULTIMEDIA
Multimedia

Multimedia pada web adalah:
 Sound
 Musik
 video
 animasi

Web browser modern telah mendukung
sejumlah format multimedia
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
multimedia ditempelkan pada halaman web.
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.
Mpeg-4
.mp4
Mpeg-4 (with H.264 video compression) adalah format baru.
YouTube merekomendasikan utk menggunakan MP4.
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.
RealAudi
o
.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 bermacammacam tujuan: memainkan musik, menampilkan
peta, verivikasi bank id, dan lain-lain.
Plugin dapat ditambahkan ke halaman HTML
menggunakan tag <object> atau <embed>.
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" />
 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>

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.
•Elemen <audio> tidak memvalidasi dalam HTML 4 dan XHTML.
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:
<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-BC80D3488ABDDC6B"
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-BC80D3488ABDDC6B"
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-96b8444553540000"
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>
</object>
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>
</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>