Nah kali ini kita akan mencoba untuk menampilkan video dan audio dengan media HTML5.
1. HTML5 Video
Dengan menggunakan HTML5, kita dapat menampilkan video dalam halaman website. Karena HTML5 telah menetapkan standar untuk memasukkan file video kedalam halaman web, yaitu dengan bantuan elemen video.
Saat ini, elemen video hanya mendukung tiga format saja yaitu OGG, MPEG4, dan WebM.
Menampilkan Video
Untuk menampilkan video dalam halaman website, kita menggunakan kode berikut :
Tag <video></video> berguna untuk membuat elemen video. Atribut src untuk menentukan lokasi file video yang akan ditampilkan. Attribut control berguna untuk menampilkan control video (play, pause, stop) pada halaman web.
Pada elemen video, kita juta dapat menentukan lebar dan tinggi video yang akan ditampilkan dengan menambahkan attribute widht (lebar) dan height (tinggi) pada tag <video></video> seperti berikut :
Apabila dijalankan dibrowser, makan akan tampil seperti berikut :
Tampilan Video Player di Chrome
Atribut Tag Video
Berikut adalah beberapa atribut tag video yang dapat digunakan :
Atribute
|
Nilai
|
Deskripsi
|
audio
|
muted
|
Mendefinisikan muted,
keadaan default audio
|
autoplay
|
autoplay
|
Video langsung
play saat halaman diakses
|
controls
|
controls
|
Untuk menampilkan
kontrol video
|
height
|
pixels
|
Menentukan tinggi
video
|
width
|
pixels
|
Menentukan lebar
video
|
loop
|
loop
|
Melakukan
pengulangan dalam memutar video
|
poster
|
url
|
Menentukan url
gambar yang mewakili video
|
preload
|
preload
|
Membuat preload
untuk video
|
src
|
url
|
Menentukan url
letak video
|
2. HTML5 Audio
HTML5 mendukung 3 format audio yaitu : OGG Vorbis, MP3, dan WAV.
Memutar Audio
Untuk memutar aurio pada dokumen HTML5, kita hanya butuh koding berikut :
Tag <audio></audio> berguna untuk membuat elemen audio. Atribut src berguna untuk menentukan lokasi file audio yang akan diputar. Atribut controls berguna untuk menampilkan kontrol audio (play dan pause) dalam halaman website.
Sekarang kita akan mencoba memutar sebuah lagu :
Dan hasilnya dibrowser chrome adalah sebagai beriku :
Tampilan audio player di chrome
Atribut Tag Audio
Berikut adalah beberapa tag audio yang dapat kita gunakan :
Nah, sudah pada paham kan teman-teman bagaimana memutar video dan audio pada browser dengan menggunakan HTML5. Sekian dulu yah, nanti kita lanjut lagi ke tahap berikutnya.
Atribute
|
Nilai
|
Deskripsi
|
autoplay
|
autoplay
|
Audio langsung
play saat halaman diakses
|
loop
|
loop
|
Melakukan pengulangan dalam memutar audio
|
controls
|
controls
|
Untuk menampilkan
kontrol video
|
src
|
url
|
Menentukan url letak audio yang akan diputar
|
Nah, sudah pada paham kan teman-teman bagaimana memutar video dan audio pada browser dengan menggunakan HTML5. Sekian dulu yah, nanti kita lanjut lagi ke tahap berikutnya.