HTML MULTIMEDIA

Multimedia

Multimedia pada web adalah:

Sound

Musik

video

animasi

Web browser modern telah mendukun

se!umlah "ormat multimedia

Apakah Multimedia

Multimedia mempun#ai ban#ak "ormat berbeda$

Multimedia berupa sesuatu #an dapat didenar

atau dilihat$

%ontohn#a: teks& ambar& musik& suara& video&

"ilm& animasi& dan lainn#a$

'ada Internet serin kita lihat elemen

multimedia ditempelkan pada halaman web$

(ormat Multimedia

Elemen multimedia )seperti sound atau

video* disimpan dalam "ile media denan
ekstensi:

$sw"&

$wmv&

$mp+&

$mp,&

dll

(ormat Multimedia )lan!utan*
Format File Deskripsi
AVI .avi Format AVI (Audio Video Interleave) dikembangkan oleh
Microsoft. Didukung oleh Windows dan ma!oritas web browser.
"idak selalu bisa dimainkan #ada kom#uter non$Windows.
WMV .wmv Format Windows Media format dikembangkan oleh Microsoft.
"idak da#at dimainkan #ada kom#uter non$Windows com#uter
tan#a kom#onen tambahan.
M%&' .m#g
.m#eg
Format M%&' (Moving %ictures &(#ert 'rou#) #aling #o#uler #ada
Internet. )ersifat cross$#latform dan didukung oleh semua web
browser #o#uler.
*uick"ime .mov Format *uick"ime dikembangkan oleh A##le. "idak da#at
dimainkan #ada kom#uter Windows tan#a kom#onen tambahan.
+ealVideo .rm
.ram
Format +ealVideo dikembangkan oleh +eal Media. Mengi,inkan
video streaming video (on$line video Internet "V) dengan low
bandwidth. -arena di#rioritaskan low bandwidth resikon!a
diturunkan kualitasn!a.
Flash .swf
.flv
Format Flash (.hockwave) dikembangkan oleh Macromedia.
Membutuhkan kom#onen tambahan teta#i sudah #reinstalled
dalam web browsers se#erti Firefo( dan Internet &(#lorer.
M#eg$/ .m#/ M#eg$/ (with 0.12/ video com#ression) adalah format baru.
3ou"ube merekomendasikan utk menggunakan M%/.

(ormat Sound
Format File Description
MIDI .mid
.midi
MIDI (Musical Instrument Digital Interface) adalah format untuk
electronic music devices se#erti s!nthesi4ers dan %5 sound card. File
MIDI tidak mencaku# sound teta#i digital musical instructions (notes) !g
d#t dimainkan oleh sound card %5.

+ealAudio .rm
.ram
Format +ealAudio dikembangkan oleh +eal Media. Mendukung video.
Mengi,inkan video streaming video (on$line music Internet radio)
dengan low bandwidth. -arena di#rioritaskan low bandwidth resikon!a
diturunkan kualitasn!a.
Wave .wav Format wave (waveform) dikembangkan oleh I)M dan Microsoft.
Didukung oleh kom#uter Windows dan semua web browser #o#uler
(kecuali 'oogle 5hrome).
WMA .wma Format WMA (Windows Media Audio) kualitas se#erti M%6 dan
com#atible dengan keban!akan #la!er. File WMA sering di#akai dalam
Internet radio atau on$line music.
M%6 .m#6
.m#ga
File M%6 meru#akan bagian suara dari file M%&'. Meru#akan salah satu
format #aling #ol#uler untuk musik. .istem encoding mengkombinasikan
kom#resi !ang baik (file kecil) dengan kualitas tinggi.

Suara Audio

Suara dapat dimainkan dalam HTML

denan ban#ak -ara$

%ara mudah menunakan .ahoo Media

'la#er:

<a href="song.mp3">Play Song</a>

<script type="text/javascript

src="http://meiaplayer.yahoo.com/js">

</script>

Menunakan 'luin

'luin adalah proram ke-il #an memperluas

"unsionalitas standar pada web browser$

'luin dapat diunakan untuk berma-am/

ma-am tu!uan: memainkan musik& menampilkan
peta& verivikasi bank id& dan lain/lain$

'luin dapat ditambahkan ke halaman HTML

menunakan ta 0ob!e-t1 atau 0embed1$

Memainkan audio menunakan
'luin

<a!io controls="controls" height=""#px" $ith="%##px">

<so!rce src="song.mp3" type="a!io/mpeg" />

<so!rce src="song.ogg" type="a!io/ogg" />

<em'e height=""#px" $ith="%##px" src="song.mp3" />

</a!io>

Menunakan elemen 0embed1

Tu!uan ta embed1 untuk menempelkan elemen

multimedia kedalam halaman HTML$

Untuk memainkan "ile M'+ #an ditempelkan

dalam halaman web:

<em'e height=""#px" $ith="%##px"

src="song.mp3" />

%atatan: Ta 0embed1 tidak terdapat pada HTML ,$

Menunakan elemen 0audio1

Elemen 0audio1 merupakan elemen

HTML 2& tidak terdapat pada HTML ,&
tetapi beker!a pada browser/browser
baru$

<a!io controls="controls">

<so!rce src="song.mp3" type="a!io/mpeg" />

<so!rce src="song.ogg" type="a!io/ogg" />

(o!r 'ro$ser oes not s!pport this a!io

</a!io>

Tia "ormat utama untuk elemen audio
Format IE 9 Firefox
3.5
Opera
10.5
Chrome
3.0
Safari
3.0
7gg Vorbis 8o 3es 3es 3es 8o
M%6 3es 8o 8o 3es 3es
Wav 8o 3es 3es 3es 3es
Persoalan:
3Anda harus menkonversi video kedalam ban#ak "ormat$
3Elemen 0audio1 tidak beker!a pada browser lama$
3Elemen 0audio1 tidak memvalidasi dalam HTML , dan 4HTML$

Solusi terbaik

0audio -ontrols56-ontrols6 heiht5627p8 width56977p861

0sour-e sr-56son$mp+6 t#pe56audio;mpe6 ;1
0sour-e sr-56son$o6 t#pe56audio;o6 ;1
0embed heiht5627p8 width56977p86 sr-56son$mp+6 ;1
0;audio1

%ontoh ini menunakan , "ormat audio berbeda$ Elemen HTML 2

0audio1 men-oba memainkan audio baik o atau mp+$ <ika aal&
kode men-oba ke elemen 0embed1$ <ika aal !ua& akan
menampilkan error$

Masalah:

Anda harus menkonversi audio kedalam beberapa "ormat$

Elemen 0audio1 tidak memvalidasi dalam HTML , dan 4HTML$

Elemen 0embed1 tidak memvalidasi dalam HTML , dan 4HTML$

Menggunakan Yahoo Media Player

.ahoo pla#er is "ree$ Untuk menunakan tinal sisipkan kode <avaS-ript

pada baian bawah halaman web:
0s-ript t#pe56te8t;!avas-ript6
sr-56http:;;mediapla#er$#ahoo$-om;!s610;s-ript1

=emudian lakukan link ke "ile M'+ daalam HTML& dan kode <avaS-ript
otomatis men-iptakan tombol pla# untuk setiap lau:
<a href="song%.mp3">Play Song %</a>
<a href="song).mp3">Play Song )</a>
<script type="text/javascript"
src="http://meiaplayer.yahoo.com/js">
</script>

Menunakan >oole
<a href="song.mp3">Play Song</a>
<em'e type="application/x*shoc+$ave*flash"

$moe="transparent"
src="http://$$$.google.com/reaer/!i/3")3,-
.3/"*a!io*player.s$f0a!io1rl=song.mp3"
height=")." $ith="3)#">
</em'e>

Menggunakan Hyperlink

<ika halaman web menunakan h#perlink ke

"ile media& keban#akan browser akan
menunakan 6helper appli-ation6 untuk
memainkan "ile$

=ode berikut menampilkan link ke "ile M'+$ <ika

user menklik link& browser akan membuka
helper appli-ation untuk memainkan "ile:
<a href="song.mp3">Play the song</a>

Elemen ?b!e-t HTML

Tu!uan elemen 0ob!e-t1 adalah untuk mendukun HTML

helpers )'lu/Ins*

Helper appli-ation adalah proram #an dapat dimuat

oleh browser untuk @membantu6$ Helper appli-ation
disebut !ua 'lu/Ins$

Helper appli-ation dapat diunakan untuk memainkan

audio dan video )dan lainn#a*$ Helper appli-ation dimuat
menunakan ta 0ob!e-t1$

=euntunan menunakan helper appli-ation untuk

memainkan video dan audio& adalah setin pla#er
)rewind& pause& stop dan pla#* dapat dikontrol user$

Memainkan Wave Audio
menggunakan QuickTime
<o'ject $ith="/)#" height="3,#"
classi="clsi:#)23)"4"*56%.*/2)3*265#*
43/5572446,2"
coe'ase="http://$$$.apple.com/8tactivex/
8tpl!gin.ca'">
<param name="src" val!e="liar.$av" />
<param name="controller" val!e="tr!e" />
</o'ject>

Memainkan MP4 Video
Menggunakan QuickTime
<o'ject $ith="/)#" height="3,#"
classi="clsi:#)23)"4"*56%.*/2)3*265#*
43/5572446,2"
coe'ase="http://$$$.apple.com/8tactivex/
8tpl!gin.ca'">
<param name="src" val!e="movie.mp/" />
<param name="controller" val!e="tr!e" />
</o'ject>

Memainkan Video SWF Menggunakan Flash
<o'ject $ith="/##" height="/#"
classi="clsi:).c',e*ae,*%%cf*-,'5*
///""3"/####"
coe'ase="http://fpo$nloa.macromeia.com/
p!'/shoc+$ave/ca's/flash/s$flash.ca'9version=5:#:#
:#">
<param name="S;6" val!e="'oo+mar+.s$f">
<em'e src="'oo+mar+.s$f" $ith="/##"
height="/#"></em'e>
</o'ject>

Memainkan WMA Movie Menunakan
Windows Media 'la#er
<o'ject $ith="%##<" height="%##<"
type="vieo/x*ms*asf" !rl="3.$mv" ata="3.$mv"
classi="6=S>4:,23")7")*3-/7*%%3*2%"3*##6#/3.-377,">
<param name="!rl" val!e="3.$mv">
<param name="filename" val!e="3.$mv">
<param name="a!tostart" val!e="%">
<param name="!i?oe" val!e="f!ll" />
<param name="a!tosi@e" val!e="%">
<param name="playco!nt" val!e="%">
<em'e type="application/x*mplayer)" src="3.$mv"
$ith="%##<" height="%##<" a!tostart="tr!e"
sho$controls="tr!e"
pl!ginspage="http://$$$.microsoft.com/Aino$s/?eiaPlay
er/"></em'e>
</o'ject>

HTM Video

Aideo dapat dimainkandalam HTML berma-am/ma-am -ara

<vieo $ith="3)#" height=")/#" controls="controls">
<so!rce src="movie.mp/" type="vieo/mp/" />
<so!rce src="movie.ogg" type="vieo/ogg" />
<so!rce src="movie.$e'm" type="vieo/$e'm" />
<o'ject ata="movie.mp/" $ith="3)#" height=")/#">
<em'e src="movie.s$f" $ith="3)#" height=")/#" />
</o'ject>
</vieo>

Ta 0embed1

Tu!uan ta 0embed1 untuk menempelkan

elemen multimedia kedalam halaman HTML $

=ode HTML berikut menampilkan (lash video

#an di/embedded kedalam halaman web:

<em'e src="intro.s$f" height=")##"

$ith=")##"/>

Menggunakan Tag !o"#ec$%

Tu!uan ta 0ob!e-t1 untuk menempelkan

elemen multimedia kedalam halaman HTML $

=ode HTML berikut menampilkan (lash video

#an di/embedded kedalam halaman web:

<o'ject ata="intro.s$f" height=")##"

$ith=")##"/>

Menggunakan Tag !video%

Elemen 0video1 adalah baru dalam HTML 2

Tu!uan ta 0video1 untuk menempelkan elemen multimedia

kedalam halaman HTML $

=ode HTML berikut menampilkan video dalam "ormat o& mp,&

atau webm #an di/embedded kedalam halaman web:

0video width56+B76 heiht56B,76 -ontrols56-ontrols61

0sour-e sr-56movie$mp,6 t#pe56video;mp,6 ;1
0sour-e sr-56movie$o6 t#pe56video;o6 ;1
0sour-e sr-56movie$webm6 t#pe56video;webm6 ;1
.our browser does not support the video ta$
0;video1

Aideo .ouTube

<ika anda inin memainkan video& anda dapat

men/upload video ke .ouTube dan
men#isipkan kode HTML untuk memainkan
video kedalam halaman web anda$

<iframe $ith="/)#" height="3/""

src="http://$$$.yo!t!'e.com/em'e/BCSy3D6@@5+">
</iframe>