MEDIA DOCS

VIDEO-ELEMENT

<video>
Description: Elemen HTML5 untuk menampilkan video secara native.
Example: 
<video src="video.mp4" controls width="640"></video>
Output: Pemutar video native
controls
Description: Menampilkan kontrol pemutaran (play, pause, volume, dll.).
Example: 
<video src="video.mp4" controls></video>
Output: Kontrol default browser
autoplay
Description: Memulai pemutaran otomatis (sering kali harus disertai muted).
Example: 
<video src="video.mp4" autoplay muted playsinline></video>
Output: Video langsung berjalan tanpa suara
muted
Description: Mematikan suara video.
Example: 
<video src="video.mp4" muted></video>
Output: Tidak ada suara
loop
Description: Mengulang video setelah selesai.
Example: 
<video src="video.mp4" loop></video>
Output: Video berulang
poster
Description: Gambar pratinjau yang muncul sebelum video diputar.
Example: 
<video src="video.mp4" poster="thumbnail.jpg"></video>
Output: Gambar poster
playsinline
Description: Memungkinkan video diputar di dalam halaman pada perangkat mobile (tidak fullscreen paksa).
Example: 
<video src="video.mp4" playsinline></video>
Output: Tetap dalam halaman di iOS
width / height
Description: Menentukan lebar dan tinggi pemutar video.
Example: 
<video src="video.mp4" width="640" height="360"></video>
Output: Ukuran eksplisit

AUDIO-ELEMENT

<audio>
Description: Elemen HTML5 untuk memutar audio.
Example: 
<audio src="lagu.mp3" controls></audio>
Output: Pemutar audio native
controls
Description: Menampilkan kontrol pemutaran (play, pause, volume).
Example: 
<audio src="lagu.mp3" controls></audio>
Output: Kontrol audio
autoplay
Description: Memulai pemutaran otomatis (sering diblokir tanpa interaksi pengguna).
Example: 
<audio src="lagu.mp3" autoplay></audio>
Output: Otomatis (jika diizinkan)
loop
Description: Mengulang audio setelah selesai.
Example: 
<audio src="lagu.mp3" loop></audio>
Output: Audio berulang
muted
Description: Mematikan audio.
Example: 
<audio src="lagu.mp3" muted></audio>
Output: Sunyi
preload
Description: Petunjuk ke browser seberapa banyak data audio harus diunduh. Nilai: auto, metadata, none.
Example: 
<audio src="lagu.mp3" preload="metadata"></audio>
Output: Hanya metadata yang diambil

SOURCE-ELEMENT

<source>
Description: Menyediakan beberapa sumber media untuk kompatibilitas codec.
Example: 
<video controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>
Output: Browser memilih source yang didukung
src
Description: URL ke file media.
Example: 
<source src="video.mp4">
Output: Sumber video
type
Description: MIME type file media, membantu browser memilih format yang didukung.
Example: 
type="video/mp4"
Output: MIME video/mp4
media
Description: Media query untuk memilih sumber responsif (misal resolusi atau orientasi).
Example: 
<source src="video-hd.webm" media="(min-width: 1200px)">
Output: Hanya dipilih pada layar lebar

TRACK-ELEMENT

<track>
Description: Menambahkan teks seperti subtitle, caption, chapter, atau description.
Example: 
<track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
Output: Teks ditampilkan
kind
Description: Jenis track: subtitles, captions, descriptions, chapters, metadata.
Example: 
kind="captions"
Output: Teks untuk tuna rungu
src
Description: URL ke file WebVTT (vtt).
Example: 
src="captions.vtt"
Output: File subtitle
srclang
Description: Kode bahasa track (en, id, dll).
Example: 
srclang="id"
Output: Bahasa Indonesia
label
Description: Nama tampilan untuk track (di menu subtitle).
Example: 
label="Indonesia"
Output: Tampil di menu
default
Description: Track yang diaktifkan secara default.
Example: 
default
Output: Subtitle langsung muncul

MEDIA-API

HTMLMediaElement.play()
Description: Memulai pemutaran media (mengembalikan Promise).
Example: 
const video = document.querySelector('video')
await video.play()
Output: Video diputar
HTMLMediaElement.pause()
Description: Menghentikan pemutaran.
Example: 
video.pause()
Output: Video berhenti
HTMLMediaElement.currentTime
Description: Mendapatkan atau mengatur posisi pemutaran dalam detik.
Example: 
video.currentTime = 30
Output: Lompat ke detik 30
HTMLMediaElement.duration
Description: Durasi total media dalam detik (read-only).
Example: 
console.log(video.duration)
Output: 120.5
HTMLMediaElement.volume
Description: Mengatur volume (0.0 hingga 1.0).
Example: 
video.volume = 0.5
Output: Volume setengah
HTMLMediaElement.muted
Description: Mematikan atau menghidupkan suara.
Example: 
video.muted = true
Output: Sunyi
HTMLMediaElement.playbackRate
Description: Mengatur kecepatan pemutaran (1.0 normal, 2.0 dua kali lipat).
Example: 
video.playbackRate = 1.5
Output: Kecepatan 1.5x
Media Events (loadstart, canplay, ended, error, dll)
Description: Berbagai event yang bisa didengarkan.
Example: 
video.addEventListener('ended', () => console.log('Selesai'))
Output: Log saat video habis

MEDIA-STREAMING

Media Source Extensions (MSE)
Description: API untuk membuat stream video sendiri (digunakan oleh pemutar canggih).
Example: 
const mediaSource = new MediaSource()
video.src = URL.createObjectURL(mediaSource)
Output: Video dari buffer
HLS (HTTP Live Streaming)
Description: Format streaming adaptif Apple. Diputar melalui library seperti hls.js.
Example: 
const hls = new Hls()
hls.loadSource('stream.m3u8')
hls.attachMedia(video)
Output: Streaming adaptif
DASH (Dynamic Adaptive Streaming over HTTP)
Description: Standar streaming adaptif internasional. Diputar dengan dash.js.
Example: 
const player = dashjs.MediaPlayer().create()
player.initialize(video, 'stream.mpd', true)
Output: Streaming adaptif DASH

FORMATS-CODECS

MP4 (H.264 + AAC)
Description: Format paling kompatibel; codec video H.264, audio AAC.
Example: 
<source src="video.mp4" type="video/mp4">
Output: Didukung hampir semua browser
WebM (VP8/VP9 + Vorbis/Opus)
Description: Format terbuka, bebas royalti. Biasanya lebih kecil.
Example: 
<source src="video.webm" type="video/webm">
Output: Chrome, Firefox, Edge
Ogg (Theora + Vorbis)
Description: Format terbuka alternatif.
Example: 
<source src="video.ogv" type="video/ogg">
Output: Firefox, Chrome
HEVC/H.265
Description: Format kompresi lebih baik, tetapi terbatas dukungan browser (Safari).
Example: 
<source src="video-hevc.mp4" type="video/mp4; codecs=hvc1">
Output: Safari (iOS/macOS)
AV1
Description: Codec terbuka generasi terbaru, kompresi tinggi, semakin didukung.
Example: 
<source src="video-av1.mp4" type="video/mp4; codecs=av01">
Output: Chrome, Firefox, Edge
MP3 (audio/mpeg)
Description: Format audio paling kompatibel.
Example: 
<source src="lagu.mp3" type="audio/mpeg">
Output: Semua browser

RESPONSIVE-IMAGES

<picture>
Description: Elemen untuk art-direction, menyediakan sumber gambar berbeda.
Example: 
<picture>
  <source srcset="large.webp" media="(min-width: 800px)">
  <img src="small.jpg" alt="...">
</picture>
Output: Gambar sesuai kondisi
srcset (atribut pada <img>)
Description: Menyediakan beberapa ukuran gambar untuk responsif.
Example: 
<img src="default.jpg" srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w" sizes="100vw" alt="...">
Output: Browser memilih ukuran terbaik
sizes
Description: Memberi tahu browser lebar tampilan gambar pada berbagai breakpoint.
Example: 
sizes="(max-width: 600px) 100vw, 50vw"
Output: Gambar responsif akurat

ACCESSIBILITY-MEDIA

Captions (kind="captions")
Description: Teks untuk orang dengan gangguan pendengaran, termasuk deskripsi suara non-bicara.
Example: 
<track src="captions.vtt" kind="captions" srclang="en" label="English" default>
Output: Semua suara ditampilkan teks
Subtitles (kind="subtitles")
Description: Terjemahan dialog, tidak termasuk suara non-bicara.
Example: 
<track src="subtitle-id.vtt" kind="subtitles" srclang="id" label="Indonesia">
Output: Terjemahan dialog
Audio Description (kind="descriptions")
Description: Deskripsi naratif tentang adegan visual untuk tuna netra.
Example: 
<track src="desc.vtt" kind="descriptions" srclang="en">
Output: Deskripsi adegan dibacakan
Transcript
Description: Teks lengkap semua konten audio dan visual, ditempatkan di luar pemutar.
Example: 
<details><summary>Transkrip Video</summary><p>...</p></details>
Output: Alternatif teks lengkap

BEST-PRACTICES

Gunakan <picture> dan srcset untuk gambar
Description: Hindari gambar besar di perangkat kecil.
Example: 
<picture>...</picture>
Output: Performa lebih baik
Sediakan fallback untuk semua <source>
Description: Pastikan ada pesan teks jika tidak ada source yang didukung.
Example: 
<video controls>
  ...
  Maaf, browser Anda tidak mendukung video.
</video>
Output: Pengalaman pengguna terjaga
Optimasi ukuran file media
Description: Kompres video/audio tanpa kehilangan kualitas signifikan.
Example: 
Gunakan HandBrake atau ffmpeg untuk kompresi.
Output: Loading lebih cepat
Hindari autoplay tanpa muted
Description: Kebijakan browser memblokir autoplay bersuara.
Example: 
autoplay muted
Output: Autoplay diizinkan