MODUL 7 BEKERJA DENGAN AUDIO DAN VIDEO

Pada modul ini, Praktikan akan mengetahui dan memahami tentang fungsi dan cara menggunakan fitur AUDIO dan VIDEO pada HTML untuk berbagai penggunaan.

Salah satu kelemahan dari HTML versi 4.0 adalah kurangnya support untuk menangani fitur audio dan video. Kelemahan ini kemudian diakomodir pada HTML versi 5. Oleh karena itu, pada bab ini akan dikenal tag pada HTML 5 yang berhubungan dengan AUDIO dan VIDEO.

7.1 AUDIO

Salah satu tag untuk menampilkan audio pada HTML 4 adalah tag <bgsound [attribute]>. Namun, tag inipun hanya di dukung oleh browser IE, sehingga tidak disarankan untuk digunakan. Tag ini mempunyai dua atribut, yaitu src=”lokasi file audio” dan loop untuk menantukan apakah file musiknya akan diputar secara terus menerus atau hanya satu kali putar saja. File audio yang disupport berformat mid, midi dan wav. Perhatikan contoh berikut :

Sewaktu halaman web tersebut dijalankan, maka file musik otomatis akan aktif. Pastikan lokasi file musiknya benar. Dan pengunjung web Anda akan menikmati alunan music yang tersaji tanpa bisa menghentikannya.

Pada HTML versi 5 telah ditambahkan tag khusus untuk Audio ini, yaitu tag <audio>, dengan atribut sebagai berikut :

         
Attribut   Nilai   Keterangan
autoplay   autoplay   Membuat audio langsung aktif
controls   controls   Menampilkan tombol untuk kontrol
loop   loop   Memutar audio secara terus menerus
muted   muted   Dapat membuat audio tidak aktif (diam)
    auto    
preload   metadata   Menentukan tampilan sebelum audio aktif
    none    
src   URL   Lokasi file audio
         

Saat ini, HTML versi 5 mendukung tiga jenis file audio, yaitu  MP3, Wav, dan Ogg.

7.2 VIDEO

Untuk VIDEO, HTML versi 4 tidak dapat menjalankannya secara langsung, dibutuhkan plugin tambahan seperti flash yang di embed ke script HTMLnya. Perhatikan contoh dibawah ini untuk menampilkan video dari youtube dengan dua cara.

Pada HTML versi 5 telah disediakan tag khusus, yaitu tag <video>, sehingga dapat langsung menampilkan video tanpa bantuan plugin tambahan. Tag <video> mempunyai atribut sebagai berikut :

Attribut   Nilai
     
autoplay   autoplay
     
controls   controls
     
height   pixels
     
loop   loop
     
muted   muted
     
poster   URL
     
     
    auto
preload   metadata
    none
     

KETERANGAN UNTUK TABEL DIATAS

Membuat vidio langsung aktif

Menampilkan tombol untuk kontrol

Mengatur tinggi dari video player

Memutar video secara terus menerus

Dapat membuat video tidak aktif (diam)

Menampilkan sebuah gambar selagi proses loading video.

Menentukan bagaimana video tampil ketika halaman web di load

  src   URL Lokasi file video
  width   pixels Mengatur lebar video player

Saat ini, HTML 5 mendukung tiga type file video, yaitu MP4, WebM, dan Ogg.

PRAKTIKUM

Untuk lebih memperdalam pemahaman Anda, silahkan coba latihan berikut dan ambil kesimpulan. Asumsi : Anda telah memiliki file video dan audio yang dibutuhkan.

1.    Latihan 1 : Menampilkan Audio disertai tombol control

Dengan cara yang lain :

2.   Latihan 2 :  Menampilkan video dengan kontrol

Dengan cara yang lain :

3.   Latihan 3 :  Menampilkan video

REFERENSI LANJUTAN :

  1. http://www.w3schools.com/tags/tag_audio.asp
  2. www.quackit.com/html_5/tags/html_audio_tag.cfm
  3. http://www.w3schools.com/tags/tag_video.asp
  4. http://www.quackit.com/html_5/tags/html_video_tag.cfm