Support Rich Media dengan HTML5

HTML5 VIDEO Video HTML5 dimaksudkan untuk menjadi standar baru dalam menampilkan video web tanpa plugin, Pada prinsipnya adalah supaya Br...

HTML5 VIDEO

Video HTML5 dimaksudkan untuk menjadi standar baru dalam menampilkan video web tanpa plugin, Pada prinsipnya adalah supaya Browser bisa lebih cepat menampilkan video dibandingkan jika kita harus menggunakan plugin seperti Flash.
video
Untuk menampilkan Video menggunakan HTML5, maka dasar nya kita bisa menggunakan Format sebagai berikut :
<!DOCTYPE HTML>
<html>
<body>
<video widht="320" height="320" controls="controls">
<source src="movie.mp4" type="video/mp4"/>
Browser does not support the video tag
</video>
</body>
</html>
Keterangan :
Atribut controls dapat kita gunakan untuk menambahkan control video seperti play, pause, dan volume.
kita juga harus memasukan konten teks antara <video> dan </video> tag untuk pada browser yang tidak mendukung elemen video.
Unsur <video> memungkinkan beberapa elemen <source>. Elemen <source> dapat link ke file video yang berbeda, Browser akan menggunakan format pertama yang dikenal, dalam contoh script berikut ini, kita bisa mendenifinisikan 2 video yang berbeda yaitu mp4 dan ogg.
<!DOCTYPE HTML>
<html>
<body>
<video widht="320" height="320" controls="controls">
<source src="movie.mp4" type="video/mp4"/>
<source src="movie.ogg" type="video/ogg"/>
Browser does not support the video tag
</video>
</body>
</html>

HTML5 AUDIO

Mengingat sampai sekarang tidak ada standart dalam memutar file audio pada browser, akhirnya bermunculan banyak file audio yang diputar menggunakan plugin seperti flash, dll. 
HTML5 mendenifisikan elemen baru yang memungkinkan untuk memutar langsung sebuah file audio di browser menggunakan tag <audio>.
Sebagai contoh tag untuk audio adalah :
<audio controls="controls">
<source src="tes.mp3" type="audio/mp3" />
</audio>
 Maka Sricpt lengkapnya adalah :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Audio Tag</title>
</head>
<body>
<audio controls="controls">
<source src="tes.mp3" type="audio/mp3" />
</audio>
</body>
</html>
Seperti pada HTML5 video, HTML5 audio ini ada tambahan atribut control yaitu Play, Pause, Volume.

Postingan Terkait

1 komentar