AMIROH, S.Kom

SMKN 3 JOMBANG

HTML MULTIMEDIA

MULTIMEDIA?

Multimedia pada sebuah web, diartikan

sebagai sound, music, videos, movies, dan

animations.

Contoh: Pictures, music, sound, videos,

records, films, animations, dan

seterusnya.

Ada banyak format multimedia yang

didukung oleh browser, misalnya:

Video : MPEG, WebM, AVI, mov dst.

Audio : mp3, mp4, wav. Midi dst

MENAMPILKAN VIDEO

Menampilkan video pada website dapat dilakukan

dengan menggunakan Tag HTML5 <video> dengan

penulisan sebagai berikut:

Contoh:

<video src="videos/Scary Movie.mkv" width="320"

height="240" controls autoplay>

</video>

Hasilnya..

Format video

Format file video yang bisa dijalankan oleh tag

<video> adalah:

Menampilkan Audio

Menampilkan Audio pada website dapat

dilakukan dengan menggunakan Tag HTML5

<Audio> dengan penulisan sebagai berikut:

Contoh:

<audio src=" videos/02. One Direction - Story Of

My Life-1.mp3 " controls autoplay loop>

</audio>

Atribut <Audio>

Controls : Displays the standard HTML5

controls for the audio on the web page.

Autoplay : Makes the audio play automatically.

Loop : Make the audio repeat (loop)

automatically.

Preload : is used in the audio element for

buffering large files

"none" does not buffer the file

"auto" buffers the media file

"metadata" buffers only the metadata for the

file

HTML Plug-ins

Element <Object>

Digunakan untuk menyisipkan object pada

browser

Object dapat berupa Java Applets, PDF

reader, atau Flash Player.

Contoh:

<object width="500" height="300px"

data="videos/the cute mero.swf">

</object>

Contoh object berupa file flash (.swf)

<object width="500" height="300px" data="videos/the cute mero.swf"></object>

Contoh object berupa file pdf (.pdf)

<object width="500" height="300px" data="videos/modul.pdf"></object>

Contoh object berupa file

HTML (.html)

<object width="500"

height="700px"

data="boxmodeltask.html">

</object>

Tag <Embed>

Memiliki fungsi yang sama dengan tag

<Object>

Digunakan untuk menyisipkan object pada

browser

Object dapat berupa Java Applets, PDF

reader, atau Flash Player.

Contoh:

<embed width="400" height="50" src=“videos/

the cute mero.swf">

</embed>

Contoh object berupa file flash (.swf)

<embed width="500" height="300px" src="videos/the cute mero.swf"></embed>

Contoh object berupa file pdf (.pdf)

<embed width="500" height="300px" src="videos/modul.pdf"></embed>

Contoh object berupa file

HTML (.html)

<embed width="500"

height="700px"

src="boxmodeltask.html">

</embed>

INSERT ONLINE VIDEO

(YOUTUBE)

Menampilkan Video Youtube

Jika anda memiliki video yang ingin

ditampilkan di website, maka sebaiknya video

tersebut diunggah terlebih dahulu ke youtube

File video yang telah diunggah, akan

mendapatkan script/code dari youtube

Selanjutnya script tersebut yang akan

digunakan untuk menampilkan video pada

halaman website

Script code Youtube

Cara Menyisipkan

Video

1. Tag <iFrame>

Script ini dapat diperoleh pada bagian Share

halaman youtube

Copy dan Paste script tersebut pada halaman

web anda

2. Tag <Object>

Cara penulisan:

Copy URL video yang ada pada Address bar youtube

Misalnya:

https://www.youtube.com/watch?v=56Sx2I1SRfA

Editlah URL di atas sehingga menjadi:

https://www.youtube.com/v/56Sx2I1SRfA

Untuk menampilkan di halaman web, tambahkan Tag

<Object> sehingga menjadi:

<object width="420" height="315"

data="https://www.youtube.com/v/56Sx2I1SRfA">

</object>

3. Tag <Embed>

Untuk mendapatkan URL video dengan Tag <Embed>,

dapat menggunakan cara yang sama dengan tag

<Object>

Cara penulisan:

<embed width="420" height="315"

src="https://www.youtube.com/v/56Sx2I1SRfA">

</embed>

Hasilnya..

INSERT ONLINE AUDIO

Menambahkan Backsound

Backsound merupakan Audio/musik yang diputar sebagai latar belakang sebuahwebsite

Untuk menambahkan backsound ke dalamhalaman web, file audio/mp3 harusdiunggah terlebih dahulu padahosting/portal yang menyediakan tempatpenyimpanan audio

Misalnya: iradeo.com

Selanjutnya anda akan mendapatkanscript/kode yang akan ditempelkan padahalaman web anda.

Tampilan iradeo.com

Dashboard iradeo.com

Lanjutan..

Copy dan Paste script audio yang telah didapat, pada

bagian sidebar website yang diinginkan (menjadi

Widget).

Hasilnya …

Tips!

Video/Audio yang akan diunggah sebaiknya

dikompres terlebih dahulu, agar kapasitas file

menjadi lebih kecil

Hal ini untuk menghemat bandwidth anda,

terutama untuk website yang memiliki

kapasitas bandwidth terbatas (bukan

unlimited)

Anda dapat menggunakan software aplikasi

Dietmp3 untuk mengompres audio dan

freevideocompressor untuk mengompres video

Tampilan Software..

Online

Interactive Object

1. Membuat Banner/Button

Flashvortex.com

Merupakan portal penyedia pembuatan animasi

objek berupa banner, text, button, menu dan

jam interaktif berformat SWF, secara online

File objek yang

diperoleh dapat

didownload atau

ditampilkan secara

langsung dari server

flashvortex.com melalui

script / kode objek yang

bersangkutan

Flashvortex.com

2. Chat Box

Chat Box

Digunakan untuk melakukan interaksi / komunikasisecara online dengan pengunjung website

Chatting box dapat diperoleh melalui portal penyedia fasilitas chatting, seperti Cbox.ws, Chatwee.com, purechat.com dst.

Script chat akan diperoleh setelah anda mendaftarpada portal tersebut

Selanjutnya Copy dan Paste script tersebut padabagian halaman web yang diinginkan, misalnya padaSidebar

Chat box ini dapat juga ditempatkan pada halamantersendiri sebagai buku tamu

Contoh Script CBOX

3. Visitor Counter

Digunakan untuk mengetahui jumlah

pengunjung sebuah website

Visitor counter dapat diperoleh melalui

portal penyedia layanan hit counter,

misalnya hitstat.com

Tampilan Hitstat.com

Hitstat.com

Merupakan salah satu portal penyedia Hit

counter/ visitor counter secara online

Script Counter dapat diperoleh setelah anda

mendaftar pada portal tersebut

Selanjutnya anda akan mendapatkan script

counter yang siap untuk disisipkan pada

halaman web anda

Script Counter

Selanjutnya Copy dan Paste script

tersebut pada bagian halaman web yang

diinginkan, misalnya pada Sidebar

4. Page Rank

Digunakan untuk menampilkan daftar peringkat

sebuah website

PrChecker.com merupakan portal yang

menyediakan sebuah widget yang dapat

menghitung popularitas sebuah website

Selanjutnya dari popularitas tersebut akan

diperoleh peringkat sebuah website terhadap

website lain di seluruh dunia.

Tampilan Prchecker.com

Script Alexa Rank

Selanjutnya Copy dan Paste script

tersebut pada bagian halaman web yang

diinginkan, misalnya pada Sidebar

TUGAS

MENYELESAIKAN PROJECT PROTOTYPE WEBSITE

MEMENUHI SEMUA KETENTUAN BERIKUT:

Struktur template boleh berubah, namun konten (menu)

tetap sama

Template terdiri atas minimal 3 kolom

Gunakan logo (interaktif) yang sesuai dengan konsep

website

Semua hyperlink pada menu telah terisi dan terhubung

dengan sempurna

Konten/Artikel minimal 7 artikel (boleh diambil dari

internet dan cantumkan sumbernya pada akhir artikel)

Halaman Download, meliputi Dokumentasi

Digital (Dokumen, Gambar, Music dan Video)

Tambahkan Layanan Interaktif pada

sidebar/halaman web, seperti Buku Tamu, Hit

Counter, Page Rank, Chat Online, FB Widget dst

Tambahkan 1 menu khusus yang menuju pada

Profile Developer (Pembuat Website)

Gunakan soft color yang sesuai, sehingga

konten terbaca dengan baik dan pengunjung

merasa nyaman

Tambahkan hal menarik lainnya yang membuat

pengunjung tertarik untuk kembali

mengunjungi web kalian

Referensi

https://developer.mozilla.org/en-

US/docs/Web/Guide/HTML/Using_HTML5_audio

_and_video

http://www.w3schools.com/html/html5_video.

asp