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 sebuah
website
 Untuk menambahkan backsound ke dalam
halaman web, file audio/mp3 harus
diunggah terlebih dahulu pada
hosting/portal yang menyediakan tempat
penyimpanan audio
 Misalnya: iradeo.com
 Selanjutnya anda akan mendapatkan
script/kode yang akan ditempelkan pada
halaman 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 / komunikasi
secara 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 mendaftar
pada portal tersebut
 Selanjutnya Copy dan Paste script tersebut pada
bagian halaman web yang diinginkan, misalnya pada
Sidebar
 Chat box ini dapat juga ditempatkan pada halaman
tersendiri 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

10 html multimedia

  • 1.
    AMIROH, S.Kom SMKN 3JOMBANG HTML MULTIMEDIA
  • 2.
    MULTIMEDIA?  Multimedia padasebuah 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
  • 3.
    MENAMPILKAN VIDEO  Menampilkanvideo 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>
  • 4.
  • 5.
    Format video  Formatfile video yang bisa dijalankan oleh tag <video> adalah:
  • 6.
    Menampilkan Audio  MenampilkanAudio 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>
  • 7.
    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
  • 8.
  • 9.
    Element <Object>  Digunakanuntuk 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>
  • 10.
    Contoh object berupafile flash (.swf) <object width="500" height="300px" data="videos/the cute mero.swf"> </object>
  • 11.
    Contoh object berupafile pdf (.pdf) <object width="500" height="300px" data="videos/modul.pdf"> </object>
  • 12.
    Contoh object berupafile HTML (.html) <object width="500" height="700px" data="boxmodeltask.html"> </object>
  • 13.
    Tag <Embed>  Memilikifungsi 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>
  • 14.
    Contoh object berupafile flash (.swf) <embed width="500" height="300px" src="videos/the cute mero.swf"> </embed>
  • 15.
    Contoh object berupafile pdf (.pdf) <embed width="500" height="300px" src="videos/modul.pdf"> </embed>
  • 16.
    Contoh object berupafile HTML (.html) <embed width="500" height="700px" src="boxmodeltask.html"> </embed>
  • 17.
  • 18.
    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
  • 19.
  • 20.
  • 21.
    1. Tag <iFrame> Script ini dapat diperoleh pada bagian Share halaman youtube  Copy dan Paste script tersebut pada halaman web anda
  • 22.
    2. Tag <Object> Carapenulisan:  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>
  • 23.
    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>
  • 24.
  • 25.
  • 26.
    Menambahkan Backsound  Backsoundmerupakan Audio/musik yang diputar sebagai latar belakang sebuah website  Untuk menambahkan backsound ke dalam halaman web, file audio/mp3 harus diunggah terlebih dahulu pada hosting/portal yang menyediakan tempat penyimpanan audio  Misalnya: iradeo.com  Selanjutnya anda akan mendapatkan script/kode yang akan ditempelkan pada halaman web anda.
  • 27.
  • 28.
  • 29.
    Lanjutan..  Copy danPaste script audio yang telah didapat, pada bagian sidebar website yang diinginkan (menjadi Widget).  Hasilnya …
  • 30.
    Tips!  Video/Audio yangakan 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
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
     Merupakan portalpenyedia 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
  • 36.
  • 37.
    Chat Box  Digunakanuntuk melakukan interaksi / komunikasi secara 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 mendaftar pada portal tersebut  Selanjutnya Copy dan Paste script tersebut pada bagian halaman web yang diinginkan, misalnya pada Sidebar  Chat box ini dapat juga ditempatkan pada halaman tersendiri sebagai buku tamu
  • 39.
  • 40.
    3. Visitor Counter Digunakan untuk mengetahui jumlah pengunjung sebuah website  Visitor counter dapat diperoleh melalui portal penyedia layanan hit counter, misalnya hitstat.com
  • 41.
  • 42.
    Hitstat.com  Merupakan salahsatu 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
  • 43.
  • 44.
     Selanjutnya Copydan Paste script tersebut pada bagian halaman web yang diinginkan, misalnya pada Sidebar
  • 45.
    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.
  • 46.
  • 47.
  • 48.
     Selanjutnya Copydan Paste script tersebut pada bagian halaman web yang diinginkan, misalnya pada Sidebar
  • 49.
    TUGAS  MENYELESAIKAN PROJECTPROTOTYPE 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)
  • 50.
     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
  • 51.