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

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>

Video Format

Berikut daftar vido format untuk HTML <video> :

Format File	MIME Types
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

Browser Support Video Format

Browser	MP4	WebM	Ogg
Internet Explorer	Ya	-	-
Chrome	Ya	Ya	Ya
Firefox	Ya [1]	Ya	Ya
Safari	Ya	-	-
Opera	Ya [2]	Ya	Ya
Edge	Ya	?	?

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>

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>

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>

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>

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>

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>

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>

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>

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>

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

Chrome	3
Safari	3.1
Firefox	3.5
Opera	10.5
IE	9
Edge	Yes

Mobile

Android webview	Ya
Chrome Android	Ya
Edge mobile	Ya
Firefox Android	4
IE mobile	?
Opera Android	Ya
iOS Safari	Ya

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

currentTime	Digunakan untuk mendapatkan posisi waktu pemutaran video
volume	Digunakan untuk mengatur tingkatan volume suara pada element <video>
muted	Digunakan untuk menentukan status bisu atau tak bersuara pada element <video>
playbackRate	Digunakan untuk mengatur tingkat kecepatan video pada saat dimainkan atau diputar
currentSrc	Digunakan untuk membaca url atau link dari element video yang sedang diputar atau dimainkan
videoWidth	Digunakan untuk menentukan Lebar dimensi video, bukan ukuran element video
videoHeight	Digunakan 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

abort	Digunakan untuk melakukan tindakan saat video dibatalkan pemuatannya (bukan karena kesalahan)
canplaythrough	Memperkirakan data file video termuat secara keseluruhan dari awal sampai akhir, sehingga dalam pemutaran video tidak ada gangguan atau buffering
ended	Digunakan untuk melakukan tidakan jika video sudah 100% habis waktu pemutarannya
error	Digunakan untuk melakukan tidakan jika file video terjadi masalah atau kesalahan, misal file url yang tidak ditemukan.
playing	Digunakan untuk melakukan tidakan saat video dimainkan, misal memutar video ketika tombol play ditekan, atau setelah terjadinya buffering pada video
progress	Digunakan untuk melakukan tindakan saat browser melakukan proses pembacaan, mendownload file video
waiting	Digunakan untuk melakukan tindakan saat kurangnya data sementara file video, salah satu contoh saat proses menunggu file video
loadedmetadata	Digunakan untuk melakukan tindakan saat file video sudah termuat secara keseluruhan serta attribute yang diterapkan telah memenuhi fungsinya.
timeupdate	Digunakan untuk melakukan tindakan saat video posisi waktu terjadi perubahan, misal saat vedeo sedang berlangsung, atau adanya proses lompatan posisi waktu pemutaran
seeking	Digunakan untuk melakukan tindakan saat user melakukan loncatan posisi waktu video
seeked	Digunakan untuk melakukan tindakan saat user selesai melakukan loncatan posisi waktu video
loadeddata	Digunakan untuk melakukan tindakan saat video sedang diloading atau dimuat oleh browser
canplay	Event 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.
durationchange	Digunakan untuk melakukan tindakan saat durasi pada video terjadi perubahan
ratechange	Digunakan untuk melakukan tindakan saat kecapatan pada video terjadi perubahan. Misal; saat user beralih mode slow, normal dan faster
volumechange	Digunakan untuk melakukan tindakan saat volume pada video terjadi perubahan
suspend	Digunakan untuk melakukan tindakan saat video ditangguhkan atau diblock oleh browser
emptied	Digunakan untuk melakukan tindakan saat terjadinya proses kosongnya file video
stalled	Digunakan 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.