Dulu, memutar video di web butuh plugin seperti Flash. Plugin itu berat, sering crash, dan punya banyak celah keamanan. HTML5 menyelesaikannya dengan elemen <audio> dan <video> yang dipahami browser secara langsung.

<video controls width="400" poster="sampul.jpg">
  <source src="tutorial.webm" type="video/webm">
  <source src="tutorial.mp4" type="video/mp4">
  <track src="subtitle-id.vtt" kind="subtitles" srclang="id" label="Indonesia" default>
  Browsermu belum mendukung video HTML5.
</video>

Hasilnya: kotak video selebar 400px yang menampilkan gambar sampul.jpg sebelum diputar, dengan tombol play, volume, timeline, layar penuh, dan menu subtitle bawaan browser.

Mari bedah:

• controls adalah atribut boolean yang memunculkan tombol pemutar. Tanpa controls, video tampil tapi pengguna tidak bisa mengaturnya, kecuali kamu membuat tombol sendiri dengan JavaScript.
• <source> boleh lebih dari satu. Browser mencoba dari atas ke bawah dan memakai format pertama yang bisa ia putar. Atribut type membantu browser melewati format yang tidak didukung tanpa harus mengunduhnya dulu.
• <track> menambahkan subtitle atau caption dari file WebVTT (.vtt). kind="subtitles" untuk terjemahan, kind="captions" untuk transkrip termasuk suara latar seperti "[musik]". srclang berisi kode bahasa, label adalah nama di menu, dan default mengaktifkannya sejak awal.
• Teks di dalam <video> hanya muncul di browser yang sangat lama.

Isi file .vtt sederhananya seperti ini:

WEBVTT

00:00:01.000 --> 00:00:04.000
Halo, selamat datang di tutorial ini.

<audio> bekerja dengan cara yang sama, hanya tanpa gambar:

<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
</audio>

Atribut lain yang berguna: autoplay, loop, muted, dan preload. Perlu diingat, browser modern memblokir autoplay yang bersuara. Video autoplay biasanya hanya boleh jalan kalau juga muted.

<iframe> menyematkan halaman web lain di dalam halamanmu. Contoh klasiknya adalah video YouTube atau peta.

<iframe src="https://www.youtube.com/embed/ID_VIDEO" width="560" height="315"
  title="Video tutorial seduh kopi" loading="lazy" allowfullscreen></iframe>

Beri title agar screen reader tahu isi iframe, dan loading="lazy" agar iframe baru dimuat saat hampir terlihat. Atribut sandbox bisa membatasi apa yang boleh dilakukan halaman di dalamnya. Latihan kode di Ruang Materi pun berjalan di iframe ber-sandbox.

<canvas> adalah area kosong berukuran piksel. HTML-nya hanya menyediakan tempat, gambarnya dibuat oleh JavaScript.

<canvas id="grafik" width="300" height="150"></canvas>
<script>
  const ctx = document.querySelector("#grafik").getContext("2d");
  ctx.fillStyle = "seagreen";
  ctx.fillRect(20, 20, 100, 60);
</script>

Hasilnya: persegi panjang hijau 100 x 60 piksel, berjarak 20 piksel dari kiri dan atas. Canvas dipakai untuk grafik, game, dan editor gambar. Untuk ikon atau logo yang harus tajam di semua ukuran, pilih <svg> karena berbasis vektor.

Web Storage menyimpan pasangan kunci dan nilai berupa teks di browser pengguna. Ada dua jenis:

Cara pakainya sama:

localStorage.setItem("tema", "gelap");
localStorage.getItem("tema");       // "gelap"
localStorage.getItem("tidakAda");   // null
localStorage.removeItem("tema");

Hal yang sering menjebak:

1. Semua nilai disimpan sebagai teks. setItem("skor", 5) menyimpan "5". Ubah kembali dengan Number(...), dan untuk objek pakai JSON.stringify saat menyimpan serta JSON.parse saat membaca.
2. Kapasitasnya kecil, umumnya sekitar 5 MB per situs.
3. Jangan simpan rahasia seperti password atau token sensitif. Semua JavaScript di halaman itu bisa membacanya.
4. Storage bisa ditolak. Di mode privat tertentu, saat pengguna memblokir data situs, atau di dalam iframe sandbox, mengakses localStorage bisa melempar error. Bungkus dengan try...catch supaya halaman tetap jalan.

Contoh kecil yang aman, penghitung kunjungan yang tetap jalan walaupun storage diblokir:

let kunjungan = 0;
try {
  kunjungan = Number(localStorage.getItem("kunjungan")) || 0;
  localStorage.setItem("kunjungan", String(kunjungan + 1));
} catch (e) {
  // storage ditolak, tetap lanjut dengan nilai 0
}

Number(null) menghasilkan 0, jadi kunjungan pertama aman. Operator || 0 menjaga dari nilai rusak yang menghasilkan NaN.

Geolocation API memberi koordinat pengguna, tapi selalu meminta izin lewat popup browser, dan hanya tersedia di halaman HTTPS (atau localhost).

navigator.geolocation.getCurrentPosition(
  (pos) => console.log(pos.coords.latitude, pos.coords.longitude),
  (err) => console.log("Lokasi tidak didapat:", err.message)
);

Fungsi pertama dipanggil kalau berhasil, fungsi kedua kalau pengguna menolak atau lokasi tidak tersedia. Selalu siapkan jalan keluar, misalnya kolom untuk mengetik kota secara manual. Minta izin tepat saat dibutuhkan, misalnya setelah tombol "Cari toko terdekat" diklik, bukan begitu halaman dibuka.

Elemen bisa dibuat bisa diseret dengan atribut draggable="true". Alurnya: event dragstart di elemen yang diseret menyimpan data, dragover di area tujuan memanggil event.preventDefault() agar elemen boleh dijatuhkan di sana, lalu drop membaca data dan memindahkan elemen. Pola ini dipakai di papan tugas ala kanban dan area upload file.

• Lupa controls sehingga video tampil tapi tidak bisa diputar.
• Hanya satu format video tanpa cadangan, atau type yang salah.
• Mengharapkan autoplay bersuara padahal browser memblokirnya.
• Lupa bahwa nilai storage berupa teks, akhirnya "1" + 1 menghasilkan "11".
• Mengakses localStorage tanpa try...catch sehingga seluruh skrip berhenti di lingkungan yang memblokir storage.
• Meminta izin lokasi saat halaman baru dibuka. Pengguna cenderung menolak permintaan yang tidak jelas alasannya.