Belajar Web – Cara Menampilkan Video pada HTML 5

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

Belajar Web – Cara Menampilkan Video pada HTML 5
Written by: Oki Helfiska
Rating: 5
I'm Teacher Vocational School in SMK Labor Pekanbaru. I interested in Computer, Networking, Web Design, Blogging and the development of computer education.

Share This Post

Related Articles

4 Responses to “Belajar Web – Cara Menampilkan Video pada HTML 5”

  1. onessfee says:

    Makasih info nya sob . . . .

  2. nana says:

    kok videonya hanya terdengar suaranya saja ya, tidak ada gambarnya

  3. LookMan says:

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

    • Oki Helfiska says:

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

Leave a Reply

Powered by WordPress · Powered by SEO