Belajar Web – Cara Menampilkan Video pada HTML 5

By | 07/09/2013

html5-videoSalah satu keunggulan yang diusung oleh HTML 5 adalah kemudahan untuk menampilkan file Video pada halaman Web tanpa harus menggunakan Plugin Khusus atau plugin tambahan seperti Flash. Tetapi cukup hanya dengan menggunakan element yang ada. Element yang dimaksud adalah element <video>.

Sebelum mencobanya, ada beberapa hal yang perlu diketahui :

1. Hampir semua web browser sudah mendukung penggunakan HMTL5. Jadi install-lah terlebih dahulu salah satu web browser yang menjadi favorit anda. Disarankan menggunakan Google Chrome.

2. Format file video yang didukung oleh HTML5 adalah berformat .mp4, .oog dan .WebM.


Adapun cara menuliskannya adalah sbb :

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

Untuk melengkapi penggunaan element, anda dapat menambahkan beberapa properties :

  • width=”dalam pixel” (Untuk Menentukan lebar video)
  • height=”dalam pixel” (Untuk Menentukan tinggi video)
  • controls=”controls” (Untuk Menampilkan tombol kontrol video)
  • autoplay=”autoplay” (Untuk Memutar video secara otomatis)
  • loop=”loop” (Untuk Mengulangi pemutaran video terus menerus)
  • muted=”muted” (Untuk Menghilangkan Output SUara pada Video)
  • poster=”URL” (Untuk menampilkan gambar awal sebelum video diputar)
  • Keterangan lebih lengkapnya bisa dibaca di http://www.w3schools.com/tags/ref_av_dom.asp

Sehingga penulisan tag HTML nya bisa seperti dibawah ini :

<video width="320" height="240" autoplay=”autoplay” controls=”controls” poster=”cover.jpg” loop=”loop”>
  <source src="video_anda.mp4" type="video/mp4">
  <source src="video_anda.ogg" type="video/ogg">
</video>

PREVIEW

Author: Oki Helfiska

I'm Teacher Vocational School in SMK Labor Pekanbaru. I interested in Computer, Networking, Web Design, Blogging and the development of computer education.

7 thoughts on “Belajar Web – Cara Menampilkan Video pada HTML 5

  1. nana

    kok videonya hanya terdengar suaranya saja ya, tidak ada gambarnya

    Reply
  2. LookMan

    gan, knapa ya videonya ttp ga nampil walaupun sya udah pake sintak d atas

    Reply
    1. Oki Helfiska Post author

      Sebelumnya pastikan dahulu browser yg mas gunakan mendukung untuk HTML5. Jika sudah, format videonya harus .mp4 atau .ogg, Mudah2an bisa jalan.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *