Monday, May 28, 2012

Cara Menampilkan Video HTML5


REBABO cara - Cara Menampilkan Video HTML5. HTML 5 adalah standar baru HTML di seluruh dunia, sebelumnya standar html adalah HTML4.0 dan sekarang sudah berganti ke HTML 5, di html 5 ada banyak fitur tambahan, mulai dari segi Multimedia, Grafik, Penyimpanan Local (Local Storage), Form (Semantics and Forms) dan CSS3.

Kali ini saya akan memberikan informasi bagaimana cara mengintegrasikan Video berekstensi .mp4 .ogg .webm pada file HTML5. Sebelum HTML 5 diluncurkan sebuah konten multimedia seperti Video harus menggunakan flash terlebih dahulu untuk menampilkanya, dan tentus saja hal tersebut tidak berkesan mandiri, karena masih mengandalkan pihak ketiga, yaitu Adobe ataupun lainya. Nah, dengan fitur baru HTML5 anda bisa menayangkan video tanpa menggunakan flash, jadi hanya berupa kode HTML saja, dan itu sangat simpel. Ok langsung saja inilah TAG video pada HTML5


<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
</video>

</body>
</html>




Copy dan paste kode html5 diatas di notepad atau editor lainya, save kemudian liat hasilnya. pada kode diatas belum terdapat sumber/source videonya, jadi anda harus menambahkanya sendiri.


contoh:  Ganti movie.mp4 pada kode diatas dengan sumber video ini  http://www.w3schools.com/html5/mov_bbb.mp4


setelah anda Save dan liat di browser hasilnya akan menjadi seperti ini.




Ajaib bukan, hanya dengan tag  <video>  anda bisa menayangkan konten video multimedia yang ringan, sederhana, dan simpel, dan tanpa menggunakan flash. Anda juga bisa langusng mendownload video tersebut dengan cara klik kanan, kemudian Save Video As...


Hanya itu saja yang bisa saya berikan mengenai cara menampilkan video pada html5. Jika masih ada yang kurang jelas silahkan tinggalkan komentar Anda dibawah

No comments:

Post a Comment