Cara menampilkan video di HTML

Cara menampilkan video di HTML

Tag video di HTML

Sesuai dengan nama tag-nya tag video berfungsi untuk menampilkan video.

Berikut tag video di  HTML

Atribut tag video

Berikut adalah atribut opsional yang ada di tag video.

Atribut Value Keterangan
autoplay autoplay  video akan di putar automatis ketika halaman di buka atau di refresh
controls controls  digunakan untuk menampilkan tombol control seperti tombol pause dan volume
height pixels  digunakan untuk mengatur tinggi video
loop loop  digunakan untuk memutar kembali secara automatis ketika video selesai
muted muted  digunakan untuk membisukan suara dari video
poster URL  digunkan untuk menampilkan gambar sebelum video diputar manual
preload auto
metadata
none
 menentukan metode video ketika halaman dimuat
src URL  digunakan untuk URL letak file video di simpan
width pixels  digunkan untuk mengatur lebar video

Value atribut preload

Value Keterangan
auto  video akan di buka automatis ketika halaman di muat/ refresh
metadata  video akan di buka secara meta data
none video tidak akan di putar secara auto maupun secara metadata

Contoh menampilkan video di file html

Dalam contoh ini admin membuat file HTML dengan nama video.html dan  nama file video tranformer-last-night.mp4. Kedua file tersebut di simpan dalam satu folder video.

Perlu kita ketahui beberapa browser open source seperti Firefox menolak file video berformat  seperti WMV dan hanya dapat menjalankan format OGG. Untuk menanggulangi hal itu, kita dapat menggunakan elemen source yang berguna untuk memberikan beberapa jenis format file sekaligus dan membiarkan browser memilih format yang dapat dijalankannya.

Format video yang didukung browser

Browser MP4 WebM Ogg
Internet Explorer
Chrome
Firefox
Safari
Opera

Elemen source di HTML

Elemen source berfungsi untuk mendefinisikan lebih dari satu sumber media (video).

Berikut penulisan elemen source di HTML

Atribut tag source

Atribut Value Keterangan
src  URL  digunakan untuk URL letak file video di simpan
type  video/mp4

video/webm

video/ogg

  Berfungsi untuk menentukan format ekstensi file video

Value atribut type

Type Format
video/mp4 MP4
video/webm WebM
video/ogg Ogg

Contoh penggunaan elemen source

Elemen track di HTML

Fungsi elemen track berfungsi untuk mendefinisikan trek teks untuk elemen media (video).

Berikut cara penulisan  elemen track di HTML

Atribut track di HTML

Berikut adalah atribut opsional yang ada di elemen tarck

Atribut Value Keterangan
default  default  Mengatur track secara default
kind captions
chapters
descriptions
metadata
subtitles
Digunakan untuk menentukan jenis track teks
label text Digunakan untuk menentukan judul  teks
src URL Digunakan untuk menentukan URL dari file media
srclang language_code Digunakan untuk menentukan bahasa data track teks

Contoh penggunaan elemen track di HTML

Dukungaan browser

Elemen / Tag

Elemen / Tag Chrome Safari Firefox Opera IE (Internet Explorer)
<video> 4.0 4.0 3.5 10.5 9.0
<source> 4.0 4.0 3.5 10.5 9.0
<track> 18.0 6.0 31.0 15.0 10.0

Atribut

Atribut Chrome Internet Explorer Firefox Safari Opera
Video
autoplay 4.0 9.0 3.5 4.0 10.5
controls 4.0 9.0 3.5 4.0 10.5
height
loop 4.0 9.0 11.0 4.0 10.5
muted 4.0 10.0 11.0 7.1 10.5
poster 4.0 9.0 3.6 4.0 10.5
preload 4.0 4.0 4.0 10.5
src 4.0 9.0 3.5 4.0 10.5
width
source
src 4.0 9.0 3.5 4.0 10.5
type 4.0 9.0 3.5 4.0 10.5
track
default 18.0 10.0 31.0 6.0 15.0
kind 18.0 10.0 31.0 6.0 15.0
label 18.0 10.0 31.0 6.0 15.0
src 18.0 10.0 31.0 6.0 15.0
srclang 18.0 10.0 31.0 6.0 15.0

Referensi

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here