Membuat Audio/Video Player Sederhana dengan HTML5

Singkatnya, HTML5 itu pengembangan dari HTML. Ada banyak elemen baru, salah satunya yang ingin diterangkan di sini yaitu elemen audio dan video. Dan dalam hal ini berbeda dengan Flash yang memakai embed content (juga tidak perlu plug-in Flash).

Audio

Untuk membuat audio player gunakan tag berikut:
<audio src="...">

Atribut yang bisa dipakai dalam tag ini yaitu:

• src="URL"
  dalam atribut ini tambahkan URL audio yang akan dipasang
• controls="controls"
  menampilkan seperti play button, sebaiknya dipakai
• autoplay="autoplay"
  yang ini digunakan agar audio berjalan secara otomatis
• loop="loop"
  digunakan bila audio yang diputar ingin terus berulang

Contohnya:

Kode HTML : <audio src="http://www39.indowebster.com/c94cd520ccf788278987ea47cd719699.mp3" controls="controls">

Hasil : (di paling bawah)

Baru ada 3 format audio yang bisa dimainkan dengan elemen ini. Format audio yang bisa ditampilkan di setiap browser berbeda-beda (karena masih baru). Berikut perbandingannya.

Format	IE 8	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis	No	Yes	Yes	Yes	No
MP3	No	No	No	Yes	Yes
Wav	No	Yes	Yes	No	Yes

Video

Sedangkan untuk membuat video player gunakan tag berikut:
<video src="...">

Atribut yang dipakai:

• src="URL"
  tambahkan URL video yang akan dipasang
• audio="muted"
  dipakai bila suara dari videonya ingin dimatikan (mute)
• controls="controls"
  menampilkan seperti play button, sebaiknya dipakai
• width="...px"
  mengatur lebar video
• height="...px"
  mengatur tinggi video

Contohnya:

Kode HTML : <video src="http://www47.indowebster.com/bdfefc1d0cc9ed775b9b55fdfb4fd79d.mp4" controls="controls">
Hasil : (di paling bawah)

Juga baru ada 3 format video yang bisa dimainkan, dan lagi setiap browser hanya dapat memainkan format video tertentu. Berikut perbandingannya.

Format	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	No	No	No	5.0+	3.0+
WebM	No	No	10.6+	6.0+	No

Note:

• Sejauh ini coba-coba HTML5 paling baik bekerja di browser Safari. Firefox tidak bisa memainkan file format mp3 dan mp4. Jadi kalau yang baca ini ga bisa lihat contohnya, ya.... Silakan download dulu Safarinya :p
• Kalau audio/ video tidak muncul pada browser, berarti browsernya tidak/ belum bisa memainkan format tersebut (jadi jangan salahin saya kalau ga bisa jalan. hehe). Silakan cek lagi dari kedua tabel sebelumnya.
• Koneksi internet sepertinya mempengaruhi load audio/ video. Jadi loadnya cepat atau lambat, begitu.
• Ini kurang tahu kenapa, entah MP tidak support HTML5 atau kenapa, saat lagi ngepost contoh hasilnya, tulisan setelah hasilnya itu tidak muncul. hmm.... Jadi sengaja dipindah paling bawah (dan yang muncul hanya yang video).
• Maaf kalau kurang jelas dan ada banyak salah, CMIIW, masih newbie v^^

Referensi utama:
W3Schools.com

Hasil contoh audio dan video: