-->

Iklan bawah header

Belajar HTML Part 12 - Cara Menampilkan Video di HTML

Video di html

Pada tutorial sebelumnya, kita sudah pernah membahas tentang bagaimana cara menambahkan gambar di HTML. Sekarang kita akan membahas tentang bagaimana cara menambahkan video di HTML.

Untuk menampilkan video di HTML, kita membutuhkan sebuah media player. Media player di HTML bisa kita buat dengan program eksternal seperti adobe flash.

Tapi itu duluu..

Sebelum adanya HTML 5, media player sangat dibutuhkan agar bisa menampilkan video di HTML. Kini kita sudah tidak memerlukannya lagi.

Sekarang kita bisa menampilkan video di HTML dengan menggunakan tag baru yang telah disediakan oleh HTML, yakni tag <video>.

Tetapi tidak semua browser mendukung tag video ini. Sehingga saat tag video di buka pada browser yang tidak mendukungnya, maka browser akan memunculkan teks browser tidak mendukung tag video.

Berikut browser yang mensupport tag video di HTML 5:

BrowserChromeInternet ExplorerMozilla FirefoxSafariOpera
Support Version4.09.03.54.010.5

Selain itu juga, tidak semua format video bisa ditampilkan di HTML. Berikut ini beberapa format video yang didukung:

Format File Media Type
MP4 video/mp4
WebM video/webm
ogg video/ogg

Cara Menampilkan Video di HTML

Jadi, jika kamu punya sebuah video dengan format yang berbeda dari ketiga format diatas, maka kamu harus terlebih dahulu mengubahnya agar bisa ditambahkan ke HTML.

Berikut contohnya:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <title>Menambahkan Video di HTML</title>
    </head>
    <body>
          <h1>Menambahkan Video di HTML</h1>
          <video controls>
             <source src="videosatu.webm" type="video/webm">
          </video>
    </body>
</html>

Atribut untuk Video

Berikut beberapa atribut yang bisa ditambahkan ke dalam tag <video>:

Nama Atribut Nilai Fungsi
autoplay true/false agar video diputar otomatis
controls true/false untuk mengaktifkan control video player
loop true/false untuk memutar video terus-menerus
muted true/false untuk menonaktifkan video
poster image path untuk menentukan gambar cover dari video
width height angka untuk menentukan tinggi dan lebar video
playsinline true/false untuk memutar video secara 'inline'

Selanjutnya

Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel