tRikSonic
Tema
/ / HTML video Tag

HTML video Tag

Terakhir diperbarui : 22 Mei 2018 - 06.43
/ / HTML video Tag
HTML video, Referensi belajar HTML <video>, Tutorial html video, Penjelasan html <video>

Tutorial HTML <video>

Element HTML video digunakan untuk menyematkan file berupa video yang bisa diputar atau dimainkan pada halaman HTML
HTML video
Dalam penulisannya di document HTML, element <video> dapat disematkan attribute src yang menentukan lokasi file video berada. Element <video> didalam nya dapat juga diikutsertakan element <source> yang fungsinya juga sama seperti attribute src pada element <video>.
Keutungan menggunakan element <source> didalam element <video> adalah kita bisa menuliskan lebih dari 1 format file video yang dapat membantu browser dalam menentukan type format apa yang tepat untuk diputar atau dimainkan.
Jika ingin menampilakan teks subtitle atau sebuah caption atau berupa teks biasa saja pada video, element <track> dapat dituluiskan didalamnya.
Tag Kelalaian (Tag omission) tidak ada untuk element ini, yang berarti element ini wajib memiliki tag pembuka dan tag penutup. Contoh ; <video>...</video>

Contoh Penulisan HTML <video>

<!-- contoh 1 -->
<video controls src="video.mp4">
  Maaf browser anda tidak support element ini
</video>

<!-- contoh 2 -->
<video controls>
  <source src="video.mp4" type="video/mp4"/>
  <source src="video.ogg" type="video/ogg"/>
  Maaf browser anda tidak support element ini
</video>

Contoh HTML <video>

<video controls>
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<base href='https://sites.google.com/site/triksonicsites/media/' target='_blank'/>
</head>
<body>

<video controls>
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>

<p>
 Pastikan koneksi anda stabil.<br>
 Silahkan tunggu video sedang dimuat
</p>

</body>
</html>

Video Format

Berikut daftar vido format untuk HTML <video> :
Format FileMIME Types
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

Browser Support Video Format

BrowserMP4WebMOgg
Internet ExplorerYa--
ChromeYaYaYa
FirefoxYa [1]YaYa
SafariYa--
OperaYa [2]YaYa
EdgeYa??
Keterangan :
  • [1] Mulai dari versi 21
  • [2] Mulai dari versi 25
  • ? tidak diketahui

Attribute HTML <video>

autoplay
Attribute ini menentukan media video akan segera diload, diputar atau dimainkan tanpa menunggu keseluruhan page html selesai dimuat.
Catatan : Dalam beberapa kasus, jika memungkinkan hindari attribute ini, karena situs yang menampilkan audio dan video yang otomatis dimainkan bisa menjadi pengalaman yang tidak menyenangkan bagi user/pengunjung.

Terkecuali jika situs atau blog yang memang memiliki kontent utamanya berupa video atau audio
Contoh :
<video autoplay controls>
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<base href='https://sites.google.com/site/triksonicsites/media/' target='_blank'/>
</head>
<body>

<video autoplay controls>
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>

<p>
  Silahkan tunggu data video sedang dimuat,
  video akan langsung terputar
</p>

<p>
  Kredit video : www.sample-videos.com
</p>

</body>
</html>
value atau nilai attribute ini adalah autoplay [1]
controls
Attribute ini digunakan untuk menampilkan kontrol video seperti, Tombol play, pause, volume dan lain lain.
Contoh :
<figure>
  <video controls>
    <source src="SampleVideo.mp4" type="video/mp4"/>
    <source src="SampleVideo.ogg" type="video/ogg"/>
  </video>
  <figcaption>Menggunakan attribute controls</figcaption>
</figure>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<base href='https://sites.google.com/site/triksonicsites/media/' target='_blank'/>
</head>
<body>

<figure>
  <video controls>
    <source src="SampleVideo.mp4" type="video/mp4"/>
    <source src="SampleVideo.ogg" type="video/ogg"/>
  </video>
  <figcaption>Menggunakan attribute controls</figcaption>
</figure>

<figure>
  <video autoplay>
    <source src="SampleVideo.mp4" type="video/mp4"/>
    <source src="SampleVideo.ogg" type="video/ogg"/>
  </video>
  <figcaption>tanpa attribute controls</figcaption>
</figure>

Pastikan koneksi anda stabil.<br>
Silahkan tunggu video sedang dimuat.

</body>
</html>
Catatan : Jika attribute ini tidak dituliskan, penggunaan javascript diperlukan sebagai kontrol.
value atau nilai attribute ini adalah controls [1]
height
Attribute ini digunakan untuk menentukan tinggi dari tampilan element <video>
Contoh :
<video controls width="250" height="200">
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<base href='https://sites.google.com/site/triksonicsites/media/' target='_blank'/>
</head>
<body>

<video controls width="250" height="200">
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>

<p>
 Pastikan koneksi anda stabil.<br>
 Silahkan tunggu video sedang dimuat.
</p>

</body>
</html>
value atau nilai attribute ini adalah pixels [2]
loop
Attribute ini digunakan untuk menentukan video akan kembali diputar atau dimainkan jika waktu pemutaran video telah habis.
Contoh :
<video controls loop>
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<base href='https://sites.google.com/site/triksonicsites/media/' target='_blank'/>
</head>
<body>

<video controls loop>
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>

<p>
 Pastikan koneksi anda stabil.<br>
 Silahkan tunggu video sedang dimuat<br>
 Tekan tombol Play pada kontrol video
</p>

</body>
</html>
value atau nilai attribute ini adalah loop [1]
muted
Attribute ini digunakan untuk menentukan audio atau suara yang dihasilkan oleh video dalam keadaan default tidak memiliki suara atau bisu
Contoh :
<video controls muted>
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<base href='https://sites.google.com/site/triksonicsites/media/' target='_blank'/>
</head>
<body>

<video controls muted>
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>

<p>
 Pastikan koneksi anda stabil.<br>
 Silahkan tunggu video sedang dimuat<br>
 Pastikan speaker perangkat anda aktif
</p>

</body>
</html>
value atau nilai attribute ini adalah muted [1]
poster
Attribute ini digunakan sebagai tampilan pengganti atau frame tambahan yang akan ditampilkan saat video sedang dimuat oleh browser, tampilan poster ini akan hilang jika video dimainkan.
Jika attribute ini tidak ditulis atau disematkan, maka nilai defaultnya ditentukan oleh browser, dan biasanya akan mengambil frame pada detik pertama atau milidetik pertama dari file video
Contoh :
<video controls poster="TrikSonic.png">
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<base href='https://sites.google.com/site/triksonicsites/media/' target='_blank'/>
</head>
<body>

<video controls poster="TrikSonic.png">
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>

<p>
 Pastikan koneksi anda stabil.<br>
 Silahkan tunggu video sedang dimuat
</p>

</body>
</html>
value atau nilai attribute ini adalah URL atau Link gambar.
preload
Attribute preload digunakan untuk menentukan bagaimana video akan dimuat oleh browser
Jika Attribute ini tidak ditulis atau disematkan, maka nilai defaultnya akan ditentukan pada masing-masing browser.
Contoh :
<video controls preload="auto">
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>

<video controls preload="metadata">
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>

<video controls preload="none">
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<base href='https://sites.google.com/site/triksonicsites/media/' target='_blank'/>
</head>
<body>

<p>Pastikan koneksi anda stabil untuk memuat video ini<br>
Tunggu sampai video 1 dan 2 termuat<br>
Lihat pada bagian bar pemuatan video
</p>

<p>
Pada video ke 3 data video tidak termuat, 
interaksi user diperlukan, maka data video akan termuat
</p>

<video controls preload="auto">
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>
Video 1
<hr>

<video controls preload="metadata">
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>
Video 2
<hr>

<video controls preload="none">
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>
Video 3

</body>
</html>
Catatan : attribute ini tidak cocok jika penerapannya bersanding dengan attribute autoplay, hal ini dikarenakan attribute autoplay lebih diutamakan dalam hal pemuatan media.
value atau nilai attribute ini adalah auto, metadata, dan none
  • auto : Media video akan termuat secara keseluruhan saat halaman sedang loading
  • metadata : Media video akan termuat sebagian saja, dan akan termuat secara penuh jika video sudah diputar atau dimainkan
  • none : Memerintahkan browser jika media video tidak boleh dimuat saat halaman sedang dimuat, interaksi dari user/pengunjung diperlukan untuk pemuatan file video, misal dengan menekan tombol Play pada controls video
src
Attribute ini digunakan untuk menentukan url atau link file video.
Tips : Jika attribute ini disematkan, dianjurkan tidak mengikutsertakan element <source>, agar tidak terjadi bentrok saat browser memuat video.
Contoh :
<video controls src="SampleVideo.mp4">
 Maaf browser anda tidak support element video
</video>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<base href='https://sites.google.com/site/triksonicsites/media/' target='_blank'/>
</head>
<body>

<video controls src="SampleVideo.mp4">
 Maaf browser anda tidak support element video
</video>

<p>
 Pastikan koneksi anda stabil.<br>
 Silahkan tunggu video sedang dimuat
</p>

</body>
</html>
value atau nilai attribute ini adalah URL atau Link
width
Attribute ini digunakan untuk menentukan lebar dari tampilan element <video>
Contoh :
<video controls width="250" height="200">
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<base href='https://sites.google.com/site/triksonicsites/media/' target='_blank'/>
</head>
<body>

<video controls width="250" height="200">
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>

<p>
 Pastikan koneksi anda stabil.<br>
 Silahkan tunggu video sedang dimuat.
</p>

</body>
</html>
value atau nilai attribute ini adalah pixels [2]
Keterangan :
  • [1] Attribute ini bersifat boolean, artinya nilai atau value attribute ini bisa ditulis ataupun tidak
  • [2] Nilai berupa angka

Global Attributes:

Element <video> mencakup Global Attributes HTML.

Event Attributes:

Element <video> mencakup Event Attributes HTML.

Browser Support HTML <video>:

Desktop
Chrome3
Safari3.1
Firefox3.5
Opera10.5
IE9
EdgeYes
Mobile
Android webviewYa
Chrome AndroidYa
Edge mobileYa
Firefox Android4
IE mobile?
Opera AndroidYa
iOS SafariYa
Table Info
  • Nilai pada table menentukan versi minimal browser
  • ? tidak diketahui

Default CSS :

Browser yang support dengan element <video>, mempunyai nilai default :
/* tidak ada */

JavaScript HTML <video>

Berikut beberapa fungsi JavaScript yang dapat diterapkan pada HTML <video>, yang bisa digunakan sebagai kontrol element <video>.
Properties
currentTimeDigunakan untuk mendapatkan posisi waktu pemutaran video
volumeDigunakan untuk mengatur tingkatan volume suara pada element <video>
mutedDigunakan untuk menentukan status bisu atau tak bersuara pada element <video>
playbackRateDigunakan untuk mengatur tingkat kecepatan video pada saat dimainkan atau diputar
currentSrcDigunakan untuk membaca url atau link dari element video yang sedang diputar atau dimainkan
videoWidthDigunakan untuk menentukan Lebar dimensi video, bukan ukuran element video
videoHeightDigunakan untuk menentukan Tinggi dimensi video, bukan ukuran element video
Methods
load()Digunakan untuk pemuatan file video, misal mengganti url video
play()Digunakan untuk memutar video ataupun melanjutkan pemutaran video
pause()Digunakan untuk memberikan jeda atau menghentikan video saat video sedang berjalan.
canPlayType()Digunakan untuk memeriksa apakah file format video dapat diputar oleh browser atau tidak

Nilai yang diberikan oleh browser adalah sebagai berikut :
  • probably : File video kemungkinan besar dapat diputar oleh browser
  • maybe : File video Mungkin dapat diputar oleh browser
  • [string kosong] : Browser tidak mendukung format video
Events
abortDigunakan untuk melakukan tindakan saat video dibatalkan pemuatannya (bukan karena kesalahan)
canplaythroughMemperkirakan data file video termuat secara keseluruhan dari awal sampai akhir, sehingga dalam pemutaran video tidak ada gangguan atau buffering
endedDigunakan untuk melakukan tidakan jika video sudah 100% habis waktu pemutarannya
errorDigunakan untuk melakukan tidakan jika file video terjadi masalah atau kesalahan, misal file url yang tidak ditemukan.
playingDigunakan untuk melakukan tidakan saat video dimainkan, misal memutar video ketika tombol play ditekan, atau setelah terjadinya buffering pada video
progressDigunakan untuk melakukan tindakan saat browser melakukan proses pembacaan, mendownload file video
waitingDigunakan untuk melakukan tindakan saat kurangnya data sementara file video, salah satu contoh saat proses menunggu file video
loadedmetadataDigunakan untuk melakukan tindakan saat file video sudah termuat secara keseluruhan serta attribute yang diterapkan telah memenuhi fungsinya.
timeupdateDigunakan untuk melakukan tindakan saat video posisi waktu terjadi perubahan, misal saat vedeo sedang berlangsung, atau adanya proses lompatan posisi waktu pemutaran
seekingDigunakan untuk melakukan tindakan saat user melakukan loncatan posisi waktu video
seekedDigunakan untuk melakukan tindakan saat user selesai melakukan loncatan posisi waktu video
loadeddataDigunakan untuk melakukan tindakan saat video sedang diloading atau dimuat oleh browser
canplayEvent ini digunakan saat proses pemutaran video dapat dilakukan, walaupun file data video secara keseluruhan tidak full termuat. Ilustrasi; saat memutar video yang beukuran besar, tapi file video tersebut tidak termuat secara keseluruhan, tapi dapat diputar sesuai dengan data yang sudah didapat.
durationchangeDigunakan untuk melakukan tindakan saat durasi pada video terjadi perubahan
ratechangeDigunakan untuk melakukan tindakan saat kecapatan pada video terjadi perubahan. Misal; saat user beralih mode slow, normal dan faster
volumechangeDigunakan untuk melakukan tindakan saat volume pada video terjadi perubahan
suspendDigunakan untuk melakukan tindakan saat video ditangguhkan atau diblock oleh browser
emptiedDigunakan untuk melakukan tindakan saat terjadinya proses kosongnya file video
stalledDigunakan untuk melakukan tindakan saat pengambilan data video terjadi macet atau gangguan. Misal ; Lambatnya proses pengambilan data video yang dikarenakan server file tersebut terjadi masalah, koneksi internet yang tidak stabil, atau file video tidak ditemukan.
Postingan Lebih BaruBerandaPostingan Lama
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.