HTML video tag | belajar <video> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML video tag. Tutorial dan panduan mengenai element <video>...</video> yang digunakan untuk memutar video. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <video>.

Deskripsi
Penjelasan HTML video

HTML <video> element digunakan untuk merujuk sumber file video, sehingga dapat diputar (dimainkan) pada halaman web.

Dalam merujuk sumber file video, digunakan attribute src yang menunjukkan source (sumber) yang mengarah pada link file video tersebut berada (disimpan), ditulis baik didalam element <video> itu sendiri atau didalam element <source> yang merepresentasikan sumber video lebih dari satu format, sehingga browser dapat memilih format video yang tepat (didukung).

Didalam element <video> dapat ditulis konten (teks), untuk browser lawas yang tidak mendukung HTML5 video. Teks ini, akan tampil sebagai ganti dari video yang tidak dapat diputar.

HTML <video> merupakan tag yang baru diperkenalkan pada HTML5.

Video Formats
Beberapa format video yang didukung oleh HTML <video> element.

Format Penjelasan Extensi File MIME Types
MP4 File MPEG 4, dengan video codec H264, dan audio codec AAC. .mp4 video/mp4
Ogg Theora File Ogg, dengan video codec Theora dan audio codec Vorbis. .ogm / .ogv / .ogg video/ogg
WebM File WebM dengan video codec VP8 dan audio codec Vorbis. .webm video/webm

Adapun untuk dukungan format video setiap browser berbeda-beda.

Browser MP4 Ogg WebM
 Chrome
 Firefox
 Internet Explorer .
 Safari
 Opera

Attributes
Atribut HTML Tag <video>

autoplay

Menginstruksikan browser untuk mulai memutar video secara otomatis sesegera mungkin tanpa berhenti.

Value: autoplay atau (dikosongkan)

controls

Menginstruksikan browser untuk menampilkan antarmuka (user interface) untuk video control (seperti menampilkan tombol putar (play), kontrol volume dan lain sebagainya).

Value: controls atau (dikosongkan)

height

Menentukan (ukuran) tinggi pemutar video (video player).

Value: Pixels

loop

Menginstruksikan browser untuk memutar ulang video ketika selesai (mencapai waktu akhir putar).

Value: loop atau (dikosongkan)

muted

Menginstruksikan browser untuk membisukan (tanpa suara) video.

Value: muted atau (dikosongkan)

poster

Menentukkan URL yang merujuk sebuah gambar yang akan dijadikan poster frame yang akan tampil sebelum video diputar (mengklik tombol "play").

Value: URL

preload

Menginstruksikan browser untuk menentukkan jika dan bagaimana penulis memuat video ketika halaman web dimuat (termasuk mengunduh (download) video dan metadata-nya) demi pengalaman menjelajah yang baik untuk user.

Value: auto | metadata | none atau (dikosongkan)

src

Menentukkan URL yang mengarah pada sumber video file berada (disimpan).

Value: URL

width

Menentukkan (ukuran) lebar pemutar video (video player).

Value: Pixels

Global Attributes
Atribut Secara Global (Keseluruhan)

<video> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event Attributes
Atribut event (Peristiwa)

<video> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <video> element

Contoh 1:

HTML video element sederhana.

HTML 
<video src="/media/video/myVideo.mp4" controls>
</video>
Contoh 2:

HTML video element yang merujuk format video lebih dari satu didalam element <source> untuk dukungan browser yang berbeda-beda.

HTML
editor 
<video width="400" controls preload="metadata">
  <source src="/media/video/myVideo.mp4" type="video/mp4"/>
  <source src="/media/video/myVideo.webm" type="video/webm"/>
  <source src="/media/video/myVideo.ogv" type="video/ogg"/>
</video>

Dibawah ini, contoh berikut editor untuk belajar HTML video dengan track dan .vtt file yang dapat digunakan untuk menulis caption atau judul video, dapat pula digunakan untuk menulis subtitle yang sering kita lihat pada video karaoke.

Untuk lebih jelasnya, silahkan pelajari juga mengenai HTML <track> element.

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML video - by: apacara.com</title>
    <style></style>
  </head>
  <body>
    <video width="320" height="240" controls>
      <source src='/media/video/halwa.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <source src='/media/video/halwa.ogv' type='video/ogg; codecs="theora, vorbis"'>
      <source src="/media/video/halwa.webm" type='video/webm; codecs="vp8, vorbis"'>

      <track label="English" kind="subtitles" srclang="en"
                                              src="/media/video/subtitles-en.vtt">
      <track label="Indonesian" kind="subtitles" srclang="id"
                                                 src="/media/video/subtitles-id.vtt" default>
      Browser Anda tidak mendukung HTML video tag.
    </video>
  </body>
</html>

Harap diperhatikan: Untuk contoh diatas, apabila subtitle tidak terlihat di dalam video, kemungkinan browser Anda tidak mendukung HTML <track> element. Gunakan browser (Google Chrome) terbaru untuk mencobanya.
SHARE
Previous Article Next Article