Kodeloka
  1. Kodeloka
  2. Kelas HTML
  3. Materi

2 · Media & Tabel · Modul 13 dari 27

Elemen video Mendalam: Poster, playsinline, Multi-Codec (AV1/WebM/MP4), dan Subtitel track

Menyajikan video di web dengan cepat, hemat pita lebar, dan aksesibel menggunakan elemen <video>, atribut width/height anti-CLS, gambar sampul poster, aturan muted playsinline untuk video latar/loop di perangkat seluler, serta lima jenis <track> (subtitles, captions, descriptions, chapters, metadata).

Praktik dan kuis di kelas interaktif →

1. Anatomi Elemen <video> Kelas Produksi

Video yang memenuhi standar aksesibilitas WCAG 1.2 wajib menyertakan takarir tertutup (<track kind="captions">) bagi pengguna Tuli atau pengguna di ruang publik yang mematikan pengeras suara.

<video
  controls
  preload="metadata"
  width="1280"
  height="720"
  poster="/media/sampul-demo-kodeloka.webp"
  crossorigin="anonymous"
>
  <source src="/media/demo-kodeloka.av1.mp4" type="video/mp4; codecs=av01.0.05M.08">
  <source src="/media/demo-kodeloka.webm" type='video/webm; codecs="vp9,opus"'>
  <source src="/media/demo-kodeloka.h264.mp4" type="video/mp4">
  <track kind="captions" src="/media/demo.id.vtt" srclang="id" label="Bahasa Indonesia (CC)" default>
  <track kind="subtitles" src="/media/demo.en.vtt" srclang="en" label="English">
  <track kind="chapters" src="/media/demo-bab.id.vtt" srclang="id" label="Daftar Bab">
  <p>Peramban Anda tidak mendukung video HTML5. <a href="/media/demo-kodeloka.h264.mp4">Unduh video MP4</a>.</p>
</video>
⚠️ Syarat Mutlak Autoplay di Peramban Seluler (muted playsinline)

Jika Anda menampilkan video animasi produk pendek tanpa suara yang berputar otomatis menggantikan berkas GIF yang bengkak, Anda wajib menyertakan kombinasi atribut autoplay muted loop playsinline. Tanpa muted dan playsinline, iOS Safari dan Chrome Android akan memblokir pemutaran otomatis atau memaksanya terbuka dalam mode layar penuh.

Latihan Praktik Mandiri

  1. Buat sebuah elemen <video> dengan atribut width="1280", height="720", preload="metadata", dan poster.
  2. Buat sebuah berkas teks subtitel.vtt berformat WEBVTT dan hubungkan menggunakan <track kind="captions" srclang="id" default>.
📚 Rujukan