Diberdayakan oleh Blogger.
RSS

Audio & Video 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 :
<audio controls="controls">
  <source src="NamaLagu.mp3" type="audio/mp3" />
</audio>


sedangkan untuk Video :
<video controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Web Browser tidak mendukung tag Video HTML 5
</video>


Oh iya, didalam HTML 5, Video hanya mengenal 3 jenis format, yaitu Ogg, MP4, danWebM.. jadi pastikan format yang ingin ditampilkan adalah demikian ya.. nah, pertanyaannya.. bagaimana jika saya hanya mempunyai video berformat FLV, AVI, dsb?.. tenang aja.. kan banyak tuh Aplikasi Video Converter?.. tinggal di convert aja ke format yang didukung HTML5.

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 :
<!DOCTYPE HTML>

<html>
<head>
    <title> HTML 5 </title>
</head>

<body>

<h4> Choy Shen Doh - Samuel Hui</h4>
<audio controls="controls">
<source src="Choy Shen Doh - Samuel Hui.mp3" type="audio/mp3" />
</audio>

</body>
</html>


dan Berikut adalah contoh penggunaan dalam html untuk memainkan Video :
<!DOCTYPE HTML>

<html>
<head>
    <title> HTML 5 </title>
</head>

<body>

<h4> Video Happy Tree Friends </h4>
<video controls="controls">
<source src="video.mp4" type="video/mp4" />
</video>
</body>
</html>


Ada kelemahan dari HTML5 ini, yaitu belum semua web browser mendukung HTML5.. 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 Google Chrome.. dan semua tanpa kendala..

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

0 komentar:

Posting Komentar