Kodealgo

Video HTML

Saat membuat halaman HTML terkadang kita perlu menambahkan video pendukung untuk melengkapi konten teks.

Tujuannya agar pengunjung lebih mudah memahami konten yang kita buat, selain itu halaman HTML juga akan terlihat lebih menarik secara visual.

Lantas, bagaimana cara memasukkan video ke HTML? Format video apa saja yang didukung? Bagaimana cara memasukkan video YouTube?

Mari kita pelajari satu per satu.

  1. Cara Memasukkan Video ke HTML
  2. Format Video yang Didukung Browser
  3. Atribut Tag video
    1. autoplay
    2. muted
    3. controls
    4. loop
    5. poster
    6. width
    7. height
  4. Subtitle Video
    1. Format File Subtitle
    2. Tag <track>
    3. Cara Menambahkan Subtitle
  5. Embed Video YouTube di HTML

Cara Memasukkan Video ke HTML

Untuk memasukkan video ke HTML mirip seperti gambar kita bisa menentukan path video yang ingin dimasukkan ke dalam atribut src.

Tapi tag dan atribut yang digunakan berbeda, bahkan ada beberapa atribut khusus yang hanya bisa digunakan untuk video saja.

Untuk menyematkan video ke halaman HTML, kita bisa menggunakan tag <video> dengan atribut width untuk menentukan lebar, controls untuk menampilkan kontrol video dan atribut lainnya.

Diantara tag <video> pembuka dan penutup, kita memerlukan tag <source> yang berisi atribut src dengan nilai path video dan type untuk menentukan tipe media.

Kita bisa menambahkan lebih dari satu tag <source> untuk memasukkan video yang sama dengan format dan tipe media berbeda.

Sehingga, jika browser tidak mendukung format video yang satu, otomatis menggunakan video dengan format yang didukung yang disematkan di dalam tag <source>.

Diakhir tag penutup <video> kita bisa menulis teks untuk ditampilkan ke pengguna ketika browser yang mereka gunakan tidak mendukung video HTML5.

Contoh:

<video width="400" controls>
  <source src="bunga-mekar.webm" type="video/webm" />
  <source src="bunga-mekar.mp4" type="video/mp4" />
  Ops! Browser yang Anda gunakan tidak mendukung video HTML5.
</video>

Hasil:

Format Video yang Didukung Browser

Ada puluhan format video yang bisa kita gunakan saat ini, tapi tidak semuanya didukung oleh browser. Jika Anda memasukkan format video yang tidak didukung, video tidak ditampilkan.

Berikut daftar format video yang didukung browser:

Format FileTipe Media
MP4video/mp4
Webmvideo/webm
Oggvideo/ogg

Ketiga format tersebut didukung oleh browser populer termasuk Chrome, Edge, Firefox, Safari, dan Opera.

Tapi, khusus untuk Safari, saat artikel ini ditulis belum mendukung format Ogg.

Yang paling sering digunkaan adalah MP4 dan Webm.

Sebagian besar video yang Anda lihat di Kodealgo menggunakan format Webm, karena ukurannya lebih kecil sehingga video dapat dimuat dengan cepat.

Jangan gunkaan GIF untuk menyematkan video singkat, ukuran file GIF jauh lebih besar daripada MP4 dan Webm.

Atribut Tag <video>

Anda dapat menyematkan beberapa atribut ke dalam tag <video> untuk menyesuaikan perilakunya.

Beberapa atribut membutuhkan nilai boolean, mari kita pelajari sedikit cara penggunaannya.

Misalnya, controls adalah atribut yang membutuhkan nilai boolean.

Jadi, untuk menampilkan kontrol video kita bisa mengisi nilai atribut ini dengan true atau tanpa nilai (hanya nama atribut).

Biasanya ditulis tanpa nilai true.

Contoh:

<video controls="true">
  <!-- ... -->
</video>

<!-- sama dengan: -->

<video controls>
  <!-- ... -->
</video>

Bagaimana jika kita ingin menghilangkan kontrol video?

Cukup hapus atribut tersebut, jangan mengisi nilai controls dengan false, ini tidak akan berfungsi, kontrol video akan tetap ditampilkan.

Mari kita pelajari beberapa atribut video yang umum digunakan.

autoplay

Atribut boolean yang berfungsi untuk menentukan apakah video akan diputar secara otomatis atau tidak (setelah dimuat).

Menggunakan atribut ini tanpa muted dapat memberikan pengalaman yang buruk kepada pengguna.

Coba bayangkan, Anda sedang mengunjungi halaman web berisi video, video tersebut diputar secara otomatis, tanpa kita kontrol.

Kebetulan video tersebut berisi audio yang mengganggu, ini tentu saja menjengkelkan bukan, apalagi jika diawal video berisi suara yang mengagetkan.

Oleh karena itu di beberapa browser termasuk Chrome, atribut ini tidak akan berfungsi jika kita menyertakan atribut muted.

Contoh:

<video autoplay muted>
  <source src="bunga-mekar.webm" type="video/webm" />
</video>

muted

Atribut boolean yang berfungsi untuk menentukan apakah suara video akan dibungkam (mute) atau tidak.

Jika Anda menggunkaan atribut autoplay, gunakan atribut ini agar tidak mengganggu pengalaman pengguna.

Contoh:

<video muted>
  <source src="bunga-mekar.webm" type="video/webm" />
</video>

controls

Atribut boolean yang berfungsi untuk menentukan apakah video akan ditampilkan dengan kontrol pemutaran, termasuk tombol jeda/lanjutkan, volume dan sebagainya.

<video controls>
  <source src="bunga-mekar.webm" type="video/webm" />
</video>

loop

Atribut boolean yang berfungsi untuk menentukan apakah video akan diputar secara berulang-ulang.

<video loop>
  <source src="bunga-mekar.webm" type="video/webm" />
</video>

poster

Atribut untuk menentukan URL gambar poster atau cover video. Jika tidak ditentukan, browser secara otomatis akan menggunakan frame pertama video.

<video poster="poster-bunga-mekar.jpg">
  <source src="bunga-mekar.webm" type="video/webm" />
</video>

width

Atribut untuk mengatur lebar video, diisi dengan nilai absolut piksel, tidak boleh menggunakan nilai relatif persentase.

Contoh:

<video width="400">
  <source src="bunga-mekar.webm" type="video/webm" />
</video>

height

Atribut untuk mengatur ketinggian video, diisi dengan nilai absolut piksel, tidak boleh menggunakan nilai relatif persentase.

Contoh:

<video height="200">
  <source src="bunga-mekar.webm" type="video/webm" />
</video>

Subtitle Video

Subtitle dapat membantu penonton yang tidak memahami bahasa yang digunakan dalam video.

Video HTML5 bisa kita tambahkan subtitle melalui tag <track> yang disematkan di dalam tag <video>.

Sayangnya, fitur ini hanya bekerja ketika kita menggunakan web server.

Jika kita memuat halaman HTML secara langsung menggunakan path ke file HTML di penyimpanan komputer, subtitle tidak tampil.

Solusinya, jika Anda menggunakan Visual Studio Code, gunakan ekstensi Live Server.

Format File Subtitle

Format file subtitle untuk video di HTML adalah Web Video Text Tracks Format (WebVTT) dengan ekstensi file .vtt.

Anda bisa mempelajari lebih lanjut mengenai aturan penulisan subtitle .vtt, untuk saat ini mari kita buat contoh sederhana.

Ini file subtitle bahasa Indonesia yang saya gunakan:

bunga-mekar-subtitle-id.vtt
WEBVTT

0
00:00:00.000 --> 00:00:02.000
Ini adalah bunga Crocus.

2
00:00:02.000 --> 00:00:05.000
Lihatlah ketika ia sedang mekar.

Bahasa Inggris:

bunga-mekar-subtitle-en.vtt
WEBVTT

0
00:00:00.000 --> 00:00:02.000
This is a Crocus flower.

2
00:00:02.000 --> 00:00:05.000
Look when it's blooming.

Tag <track>

Untuk menambahkan subtitle, kita memerlukan tag <track>.

Berikut beberapa atribut untuk tag <track> yang biasa digunakan untuk kebutuhan subtitle video.

  • kind dengan nilai subtitles: menunjukkan jenis konten yang terkandung dalam file src yaitu subtitle.
  • label: untuk menentukan label bahasa, misalnya Indonesia atau English.
  • src: untuk menentukan URL atau path ke file subtitle.
  • srclang: kode bahasa yang digunakan dalam subtitle.
  • default: jika salah satu <track> memiliki atribut default maka subtitle itu yang akan digunakan dan ditampilkan secara default.

Cara Menambahkan Subtitle

Untuk menambahkan subtitle, Anda hanya perlu memasukkan tag <track> dan menyesuaikan atributnya sesuai kebutuhan.

Contoh:

<video width="400" controls>
  <source src="bunga-mekar.webm" type="video/webm" />
  <track
    label="Indonesia"
    srclang="id"
    kind="subtitles"
    src="bunga-mekar-subtitle-id.vtt"
    default
  />
  <track
    label="English"
    srclang="en"
    kind="subtitles"
    src="bunga-mekar-subtitle-en.vtt"
  />
</video>

Hasil:

Embed Video YouTube di HTML

Untuk menyematkan video YouTube ke HTML, kita tidak perlu menggunakan atribut <video>, kita bisa menggunakan skrip embed yang telah disediakan.

Untuk mendapatkan skrip embed video YouTube caranya:

  1. Putar video YouTube yang diinginkan.
  2. Klik tombol SHARE (BAGIKAN).
  3. Pilih opsi Embed (Sematkan).
  4. Lalu, pilih COPY (SALIN) untuk menyalin kode embed.
  5. Tempelkan skrip yang telah disalin ke halaman HTML.

Skrip embed video yang telah disalin kurang lebih seperti berikut:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/EbpFRF9yBGY"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

Hasil:

Embed Video YouTube

Anda dapat menyesuaikan atribut <iframe> pada kode embed sesuai kebutuhan, termasuk menyesuaikan nilai width untuk mengatur lebar video, height untuk tinggi video dan lainnya.

Selain atribut yang sudah disertakan secara default, ada beberapa atribut dan beberapa penyesuaikan yang bisa Anda lakukan, baca dokumentasi resmi API Pemutar Video YouTube.

« Sebelumnya
TabelSelanjutnya »
Audio