Memasukkan video audio di HTML 5

Kali ini saya akan membahas mengenai HTML 5, HTML 5 merupakan versi terbaru dari html dimana ada beberapa tag-tag baru yang disuntikkan didalamnya.

Anda pasti akan menjumpai tag seperti <article>, <header>, <footer>, dll.. dan tentunya yang paling mencolok dari itu semua adalah tersedianya fitur pemutar Video / Audio..

Kali ini, saya ingin men-share mengenai pemutar Audio / Video.. mengapa?.. karena menurut saya, kedua fitur tersebut memang yang paling menarik.. 
pada html versi sebelumnya, bagaimana caranya agar kita dapat memutar video didalam web?.. Wah.. ribet banget deh.. kita harus menggunakan tag <embed embed wewewe gombel> walah.. wewe gombel dibawa-bawa.. piye toh?.. 

Nah, pada html 5, cukup kita menggunakan tag <audio> untuk memutar audio/suara dan <video> untuk memutar video.
Format dasarnya seperti berikut :

view plainprint?

1. <audio controls="controls">  
2.   <source src="NamaLagu.mp3" type="audio/mp3">  
3. </source>  

sedangkan untuk Video :

view plainprint?

1. <video controls="controls">  
2. <source src="movie.ogg" type="video/ogg" />  
3. <source src="movie.mp4" type="video/mp4" />  
4. <source src="movie.webm" type="video/webm" />  
5. Web Browser tidak mendukung tag Video HTML 5  
6. </video>  

Oh iya, didalam HTML 5, Video hanya mengenal 3 jenis format yaitu Ogg, MP4, dan WebM. jadi pastikan format yang ingin ditampilkan adalah demikian ya. Untuk type format jenis lain silakan tinggal di convert aja ke format yang didukung HTML 5.

Berikut keterangan Format Video :
- Ogg = File Ogg dengan Video Codec Theora dan Audio Codec Vorbis.
- MPEG4 = file MPEG 4 dengan Video Codec H.264 dan Audio Codec AAC.
- WebM = file WebM dengan Video Codec VP8 dan Audio Codec Vorbis.

Berikut adalah contoh penggunaan dalam html untuk memainkan fitur Audio :

view plainprint?

1. <title> HTML 5 </title>  
2. <h4>7 Ikans (OVJ) - Andeca andeci</h4><audio controls="controls">  
3. <source src="7 Ikans (OVJ) - Andeca andeci.mp3" type="audio/mp3">  
4. </audio>  

Dan Berikut adalah contoh penggunaan dalam html untuk memainkan Video :

view plainprint?

1. <title> HTML 5 </title>  
2. <h4>7 Ikans (OVJ) - Andeca andeci</h4><video controls="controls">  
3. <source src="7 Ikans (OVJ) - Andeca andeci.mp4" type="video/mp4">  
4. </video>   

Ada kelemahan dari HTML5 ini, yaitu belum semua web browser mendukung HTML 5, tapi tunggu saja ke depannya pasti web browser akan mendukung HTML versi ini, untuk mencobanya pastikan web browser Anda adalah :
- Internet Explorer (IE) versi 9.0+
- Firefox versi 3.5+
- Opera versi 10.5+
- Google Chrome versi 5.0+
- Safari versi 3.0+

Namun, disini saya mencobanya dengan menggunakan Firefox dan semua tanpa kendala.