Html Video Tag

Tutorial HTML `<video>`

Element HTML video dipakai untuk menyematkan file berupa video yang sanggup diputar atau dimainkan pada halaman HTML

Element HTML video dipakai untuk menyematkan file berupa video yang sanggup diputar atau di HTML video Tag

Dalam penulisannya di document HTML, element <video> sanggup disematkan attribute src yang memilih lokasi file video berada. Element <video> didalam nya sanggup juga diikutsertakan element <source> yang fungsinya juga sama menyerupai attribute src pada element <video>.

Keutungan memakai element <source> didalam element <video> yaitu kita sanggup menuliskan lebih dari 1 format file video yang sanggup membantu browser dalam memilih type format apa yang sempurna untuk diputar atau dimainkan.

Jika ingin menampilakan teks subtitle atau sebuah caption atau berupa teks biasa saja pada video, element <track> sanggup dituluiskan didalamnya.

Tag Kelalaian (Tag omission) tidak ada untuk element ini, yang berarti element ini wajib mempunyai tag pembuka dan tag penutup. Contoh ; <video>...</video>

Contoh Penulisan HTML `<video>`

<!-- referensi 1 --> <video controls src="video.mp4">   Maaf browser anda tidak support element ini </video>  <!-- referensi 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 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 memilih media video akan segera diload, diputar atau dimainkan tanpa menunggu keseluruhan page html selesai dimuat.

Catatan : Dalam beberapa kasus, jika memungkinkan hindari attribute ini, alasannya situs yang menampilkan audio dan video yang otomatis dimainkan sanggup menjadi pengalaman yang tidak menyenangkan bagi user/pengunjung.

Terkecuali kalau situs atau blog yang memang mempunyai 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 pribadi terputar </p>  <p>   Kredit video : www.sample-videos.com </p>  </body> </html>

value atau nilai attribute ini yaitu autoplay [1]

controls

Attribute ini dipakai 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 diharapkan sebagai kontrol.

value atau nilai attribute ini yaitu controls [1]

height

Attribute ini dipakai untuk memilih 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 yaitu pixels [2]

loop

Attribute ini dipakai untuk memilih video akan kembali diputar atau dimainkan kalau 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 yaitu loop [1]

muted

Attribute ini dipakai untuk memilih audio atau bunyi yang dihasilkan oleh video dalam keadaan default tidak mempunyai bunyi 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 yaitu muted [1]

poster

Attribute ini dipakai sebagai tampilan pengganti atau frame pemanis yang akan ditampilkan ketika video sedang dimuat oleh browser, tampilan poster ini akan hilang kalau 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 yaitu URL atau Link gambar.

preload

Attribute preload dipakai untuk memilih 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 hingga video 1 dan 2 termuat<br> Lihat pada potongan kafe 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 kalau penerapannya bersanding dengan attribute autoplay, hal ini dikarenakan attribute autoplay lebih diutamakan dalam hal pemuatan media.

value atau nilai attribute ini yaitu auto, metadata, dan none

auto : Media video akan termuat secara keseluruhan ketika halaman sedang loading
metadata : Media video akan termuat sebagian saja, dan akan termuat secara penuh kalau video sudah diputar atau dimainkan
none : Memerintahkan browser kalau media video dilarang dimuat ketika halaman sedang dimuat, interaksi dari user/pengunjung diharapkan untuk pemuatan file video, misal dengan menekan tombol Play pada controls video

src

Attribute ini dipakai untuk memilih url atau link file video.

Tips : Jika attribute ini disematkan, dianjurkan tidak mengikutsertakan element <source>, biar tidak terjadi bentrok ketika 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 yaitu URL atau Link

width

Attribute ini dipakai untuk memilih 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 yaitu pixels [2]

Keterangan :

[1] Attribute ini bersifat boolean, artinya nilai atau value attribute ini sanggup ditulis ataupun tidak
[2] Nilai berupa angka

Global Attributes:

Element <video> meliputi Global Attributes HTML.

Event Attributes:

Element <video> meliputi 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 memilih 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 sanggup diterapkan pada HTML <video>, yang sanggup dipakai sebagai kontrol element <video>.

Properties

currentTime	Digunakan untuk mendapat posisi waktu pemutaran video
volume	Digunakan untuk mengatur tingkatan volume bunyi pada element `<video>`
muted	Digunakan untuk memilih status bisu atau tak bersuara pada element `<video>`
playbackRate	Digunakan untuk mengatur tingkat kecepatan video pada ketika dimainkan atau diputar
currentSrc	Digunakan untuk membaca url atau link dari element video yang sedang diputar atau dimainkan
videoWidth	Digunakan untuk memilih Lebar dimensi video, bukan ukuran element video
videoHeight	Digunakan untuk memilih 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 menunjukkan jeda atau menghentikan video ketika video sedang berjalan.
canPlayType()	Digunakan untuk menyidik apakah file format video sanggup diputar oleh browser atau tidak Nilai yang diberikan oleh browser yaitu sebagai berikut : probably : File video kemungkinan besar sanggup diputar oleh browser maybe : File video Mungkin sanggup diputar oleh browser [string kosong] : Browser tidak mendukung format video

Events

abort	Digunakan untuk melaksanakan tindakan ketika video dibatalkan pemuatannya (bukan alasannya kesalahan)
canplaythrough	Memperkirakan data file video termuat secara keseluruhan dari awal hingga akhir, sehingga dalam pemutaran video tidak ada gangguan atau buffering
ended	Digunakan untuk melaksanakan tidakan kalau video sudah 100% habis waktu pemutarannya
error	Digunakan untuk melaksanakan tidakan kalau file video terjadi duduk kasus atau kesalahan, misal file url yang tidak ditemukan.
playing	Digunakan untuk melaksanakan tidakan ketika video dimainkan, misal memutar video ketika tombol play ditekan, atau sesudah terjadinya buffering pada video
progress	Digunakan untuk melaksanakan tindakan ketika browser melaksanakan proses pembacaan, mendownload file video
waiting	Digunakan untuk melaksanakan tindakan ketika kurangnya data sementara file video, salah satu referensi ketika proses menunggu file video
loadedmetadata	Digunakan untuk melaksanakan tindakan ketika file video sudah termuat secara keseluruhan serta attribute yang diterapkan telah memenuhi fungsinya.
timeupdate	Digunakan untuk melaksanakan tindakan ketika video posisi waktu terjadi perubahan, misal ketika vedeo sedang berlangsung, atau adanya proses lompatan posisi waktu pemutaran
seeking	Digunakan untuk melaksanakan tindakan ketika user melaksanakan loncatan posisi waktu video
seeked	Digunakan untuk melaksanakan tindakan ketika user selesai melaksanakan loncatan posisi waktu video
loadeddata	Digunakan untuk melaksanakan tindakan ketika video sedang diloading atau dimuat oleh browser
canplay	Event ini dipakai ketika proses pemutaran video sanggup dilakukan, walaupun file data video secara keseluruhan tidak full termuat. Ilustrasi; ketika memutar video yang beukuran besar, tapi file video tersebut tidak termuat secara keseluruhan, tapi sanggup diputar sesuai dengan data yang sudah didapat.
durationchange	Digunakan untuk melaksanakan tindakan ketika durasi pada video terjadi perubahan
ratechange	Digunakan untuk melaksanakan tindakan ketika kecapatan pada video terjadi perubahan. Misal; ketika user beralih mode slow, normal dan faster
volumechange	Digunakan untuk melaksanakan tindakan ketika volume pada video terjadi perubahan
suspend	Digunakan untuk melaksanakan tindakan ketika video ditangguhkan atau diblock oleh browser
emptied	Digunakan untuk melaksanakan tindakan ketika terjadinya proses kosongnya file video
stalled	Digunakan untuk melaksanakan tindakan ketika 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.

Parasit Onlen

Html Video Tag

Tutorial HTML `<video>`

Contoh Penulisan HTML `<video>`

Contoh HTML `<video>`

Video Format

Browser Support Video Format

Attribute HTML `<video>`

Global Attributes:

Event Attributes:

Browser Support HTML `<video>`:

Default CSS :

JavaScript HTML `<video>`

Menu Halaman Statis

Html Video Tag

Tutorial HTML <video>

Contoh Penulisan HTML <video>

Contoh HTML <video>

Video Format

Browser Support Video Format

Attribute HTML <video>

Global Attributes:

Event Attributes:

Browser Support HTML <video>:

Default CSS :

JavaScript HTML <video>

Menu Halaman Statis

Tutorial HTML `<video>`

Contoh Penulisan HTML `<video>`

Contoh HTML `<video>`

Attribute HTML `<video>`

Browser Support HTML `<video>`:

JavaScript HTML `<video>`