0Pricing
HTML Academy · Pelajaran

Subtitel dengan track dan WebVTT

Tambahkan keterangan dan subtitel ke video dengan track dan file .vtt.

Subtitel dengan track dan WebVTT adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Takarir dan Subtitel

Aksesibilitas video memerlukan alternatif teks untuk konten audio:

  • Subtitel — transkripsi dialog, dengan asumsi penonton dapat mendengar suara
  • Takarir — dialog + deskripsi suara (untuk pengguna tunarungu)
  • Deskripsi audio — menjelaskan konten visual bagi pengguna tunanetra

Elemen track

Elemen <track> menautkan berkas subtitel/takarir ke video:

<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track
    src="tutorial-en.vtt"
    kind="subtitles"
    srclang="en"
    label="English"
    default
  >
  <track
    src="tutorial-es.vtt"
    kind="subtitles"
    srclang="es"
    label="Spanish"
  >
</video>

Atribut track

Atribut elemen track:

  • src — jalur ke berkas VTT
  • kind — jenis trek (subtitel, takarir, deskripsi, bab, metadata)
  • srclang — kode bahasa BCP 47 (en, es, fr...)
  • label — nama yang mudah dipahami yang ditampilkan di menu CC
  • default — boolean; trek ini ditampilkan secara bawaan

Format WebVTT

WebVTT (Trek Teks Video Web) adalah format berkas subtitel:

WEBVTT

00:00:01.000 --> 00:00:04.000
Hello and welcome to the HTML5 tutorial.

00:00:04.500 --> 00:00:08.000
In this lesson, we'll cover the video element
and how to add subtitles.

00:00:09.000 --> 00:00:12.000
[Keyboard click sounds]
Let's look at a code example...

Pengenal Cue VTT

Cue VTT dapat memiliki pengenal opsional:

WEBVTT

intro-1
00:00:01.000 --> 00:00:04.000
Welcome to the tutorial.

intro-2
00:00:04.500 --> 00:00:08.000
We'll cover HTML5 video today.

00:00:09.000 --> 00:00:12.000
No identifier on this cue — that is fine.

Pengaturan Cue VTT

Cue VTT mendukung pengaturan posisi:

WEBVTT

00:00:01.000 --> 00:00:04.000 position:10% align:left
This text is positioned at the left.

00:00:05.000 --> 00:00:08.000 line:10%
This text appears near the top.

00:00:09.000 --> 00:00:12.000 size:50% position:75%
A smaller caption on the right.

Menata Gaya Cue WebVTT dengan CSS

Atur gaya kotak cue dengan pseudo-elemen ::cue:

/* Style all cues: */
::cue {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 1.2rem;
  font-family: 'Arial', sans-serif;
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

/* Style specific voice tags: */
::cue(v[voice="Teacher"]) {
  color: #60a5fa;
}

Nilai kind pada track

Atribut kind menentukan tujuan trek teks:

  • subtitles — terjemahan atau transkripsi dialog
  • captions — dialog + deskripsi suara untuk pengguna tunarungu
  • descriptions — deskripsi audio konten visual bagi pengguna tunanetra
  • chapters — judul bab untuk navigasi
  • metadata — data yang dapat dibaca mesin untuk JavaScript

Trek Bab

Gunakan kind=chapters untuk navigasi bab video:

<track
  kind="chapters"
  src="chapters.vtt"
  srclang="en"
  label="Chapters"
>

<!-- chapters.vtt: -->
<!--
WEBVTT

00:00:00.000 --> 00:01:30.000
Introduction

00:01:30.000 --> 00:05:00.000
HTML Document Structure

00:05:00.000 --> 00:10:00.000
Forms and Input
-->

API TextTrack JavaScript

Akses data trek dengan API TextTrack:

const video = document.getElementById('tutorial');
const tracks = video.textTracks;

// Enable a track:
tracks[0].mode = 'showing';  // 'hidden', 'showing', or 'disabled'

// Listen for active cue changes:
tracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) console.log('Current cue:', cue.text);
});

Trek Metadata untuk Video Interaktif

Gunakan trek metadata untuk memicu peristiwa JavaScript pada waktu tertentu:

<track kind="metadata" src="interactive.vtt" id="meta-track">

<script>
video.textTracks[0].mode = 'hidden';
video.textTracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) {
    const data = JSON.parse(cue.text);
    // Trigger quiz, show annotation, etc.
    showAnnotation(data);
  }
});
</script>

Persyaratan Aksesibilitas

WCAG mewajibkan takarir untuk video prarekaman:

  • Tingkat A — takarir untuk semua video prarekaman yang memiliki audio
  • Tingkat AA — deskripsi audio untuk semua video prarekaman
  • Takarir yang dibuat otomatis (YouTube) tidak memadai tanpa peninjauan
  • Takarir harus akurat, tersinkronisasi, dan lengkap

Pemeriksaan Singkat

Apa perbedaan antara jenis trek subtitel dan takarir?

Ringkasan: track dan WebVTT

Hal-hal penting tentang subtitel dan takarir:

  • <track src kind srclang label default> di dalam video
  • kind: subtitel, takarir, deskripsi, bab, metadata
  • Format berkas WebVTT: WEBVTT + waktu --> waktu + teks
  • Atur gaya cue dengan pseudo-elemen CSS ::cue
  • WCAG mewajibkan takarir untuk video prarekaman

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Subtitel dengan track dan WebVTT” gratis?

Ya — teks lengkap “Subtitel dengan track dan WebVTT” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Subtitel dengan track dan WebVTT”?

Tambahkan keterangan dan subtitel ke video dengan track dan file .vtt. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Subtitel dengan track dan WebVTT” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Elemen audio src controls loop autoplay
  2. Elemen video dan Rasio Aspek
  3. Elemen source untuk Berbagai Format
  4. Subtitel dengan track dan WebVTT
← Kembali ke HTML Academy