Cara menampilkan video mengunakan HTML5 merupakan tutorial HTML pertama yang saya tulis di blog ini. Mungkin tutorial ini sudah banyak Anda temui di internet. Namun, tidak ada salahnya jika saya menulisnya di blog ini, dengan harapan dapat membantu para pembaca yang belum mengetahuinya.

Sebelum hadirnya HTML5 jika kita ingin menampilkan video pada halaman website kita, maka kita membutuhkan sebuah plugin. Namun, setelah hadirnya HTML5 kita tidak membutuhkan plugin tersebut lagi, kita cukup mendeklarasikan tag HTML5 Video (<video>).

Mengenal HTML5 Video

HTML5 Video merupakan sebuah istilah yang digunakan untuk menampilkan video dengan menggunakan tag <video>, dimana tag ini merupakan salah satu tag HTML5.

Apabila Anda ingin menampilkan video menggunakan HTML5, Anda harus mendeklarasikan HTML5 dan elemen-elemen HTML5 lainnya supaya dokumen HTML Anda valid HTML5.

Contoh Tag HTML5 Video

Berikut ini adalah contoh tag HTML5 video:

<video width="320" height="240" controls>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Keterangan:

  • Pada tag video terdapat atribut width, height dan controls. Atribut width digunakan untuk menentukan lebar tampilan dari video. Atribut height digunakan untuk menentukan tinggi tampilan dari video. Atribut controls digunakan untuk menampilkan tombol kontrol seperti play/pause dan tombol lainnya, atribut ini tidak harus atau opsional.
  • Pada tag source di atas memiliki 2 atribut, yaitu src dan type. Atribut src digunakan untuk menentukan sumber video yang akan ditampilkan. Sedangkan atribut type digunakan untuk menentukan jenis format video.
  • Sebelum tag penutup video terdapat teks ‘Your browser does not support the video tag’, teks ini akan ditampilkan jika browser tidak support dengan tag video.

Sekarang saatnya kita latihan menampilkan video menggunakan HTML5 di PC masing-masing. 😀 . Berikut langkah-langkahnya:

  1. Buka editor (notepad, notepad++, sublime etc) di PC Anda.
  2. Ketikan tag HTML di bawah ini pada editor Anda.
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
    	<title>Cara Menampilkan Video Menggunakan HTML5</title>
      </head>
      <body>
        <video width="320" height="240" controls>
    	  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    	  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    	  Your browser does not support the video tag.
    	</video>
      </body>
    </html>
  3. Simpan file tersebut dengan nama ‘html5_video.html’. Untuk lokasinya terserah Anda mau tempatkan dimana, mau di drive C, D atau E.
  4. Kemudian klik kanan pada file tersebut, pilih open with dan pilih browser yang akan Anda gunakan. Jika Anda benar dalam mengetikan tag HTML di atas, maka tampilan pada browser Anda akan seperti gambar di bawah ini.

Cara Menampilkan Video Menggunakan HTML5

Jenis Format Video yang Didukung Tag HTML5 Video

Saat ini terdapat 3 jenis format video yang didukung tag HTML5 Video diantaranya, yaitu:

  1. OGG
  2. MP4
  3. WebM

Browser Support

Perlu diketahui tidak semua browser dan tidak semua versi browser support tag HTML5 Video. Untuk lebih jelasnya silahkan lihat tabel di bawah ini.

Element Chrome IE Firefox Safari Opera
<video> 4.0 9.0 3.5 4.0 10.5

Semoga sekarang Anda sudah mengetahui dan bisa menampilkan video menggunakan HTML5. Bagi Anda yang ingin mengetahui cara membuat QR Code dengan PHP dapat membaca artikel sebelumnya.