• Tidak ada hasil yang ditemukan

Multimedia. Multimedia pada web adalah: Web browser modern telah mendukung sejumlah format multimedia. Sound Musik video animasi

N/A
N/A
Protected

Academic year: 2021

Membagikan "Multimedia. Multimedia pada web adalah: Web browser modern telah mendukung sejumlah format multimedia. Sound Musik video animasi"

Copied!
26
0
0

Teks penuh

(1)
(2)

Multimedia

Multimedia pada web adalah:

Sound

Musik

video

animasi

Web browser modern telah mendukung

(3)

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

(4)

Format Multimedia

Elemen multimedia (seperti sound atau

video) disimpan dalam file media dengan

ekstensi:

.swf,

.wmv,

.mp3,

.mp4,

dll

(5)

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.

(6)

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.

(7)

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>

(8)

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

(9)

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>

(10)

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" />

(11)

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>

(12)

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.

(13)

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.

(14)

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>

(15)

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>

(16)

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:

(17)

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.

(18)

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>

(19)

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>

(20)

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>

(21)

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>

(22)

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>

(23)

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"

(24)

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"

(25)

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.

(26)

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>

Referensi

Dokumen terkait

Dalam definisinya disebutkan bahwa BUMDesa adalah badan usaha yang seluruh atau sebagian besar modalnya dimiliki oleh Desa melalui penyertaan yang berasal dari kekayaan

Oleh karena itulah, tidak boleh ada akad jual beli terhadap barang yang tidak ada atau dikhawatirkan tidak ada (Rahman, 2010). 2) Suci, yakni barang yang dijadikan

40 Syifa’ Amin, Fazlurahman.. sehingga membuat hukum tertinggal dari perkembangan masyarakat. Situasi dan kondisi demikian tak diragukan lagi, menuntut suatu upaya

Hasil analisis sidik ragam pengaruh empat jenis kompos pada bobot biji pertanaman (g) tiga varietas kedelai... Deskripsi kedelai Varietas Tanggamus ... Deskripi kedelai

Equiptment mempunyai umur ekonomis 8 tahun, metode penyusutan Garis Lurus, nilai residu ditaksir sebesar Rp.17.000.000,-Penyusutan diperhitungkan dan dicatat setiap bulan

Hasil sidik ragam menunjukkan bahwa pengaruh interaksi antara faktor pupuk mutiara dengan faktor pupuk kandang sapi berbeda sangat nyata sampai beda nyata

ditandai dengan perubahan tingkah laku, tidak bisa konsentrasi dan sering lupa. Pada keadaan ini tidak ada keluhan seperti demam, fotofobia atau gejala ensefalitis lainnya

[r]