Video tutorial memasak rendang buatan Siti berisi gambar bergerak, suara penjelasan, dan takarir langkah — tiga lapis informasi sekaligus. Sejak elemen video hadir, rekaman seperti itu disematkan langsung ke halaman tanpa plugin tambahan. Browser yang memutarnya sekaligus mengurus dekoder, antarmuka, dan tata letaknya.

Chapter ini membahas atribut dasar video — src, width, height, controls, dan poster — beserta teks fallback, dan satu kebijakan browser modern yang wajib kita pahami sebelum menyentuh autoplay.

Aturan Dasar video #

Elemen video menyematkan satu pemutar video. Sumbernya diberikan lewat atribut src atau lewat anak source saat kita menyediakan beberapa format. Atribut controls menampilkan tombol bawaan browser: putar, jeda, linimasa, volume, dan layar penuh.

Atribut width dan height mengatur ukuran tampilan dalam piksel. Kedua atribut ini bukan sekadar tampilan — browser memakainya untuk menyiapkan ruang sebelum data video termuat, sehingga tata letak halaman tidak melompat ketika video muncul. Pola yang sama sudah kita pakai pada img di Section Images.

Contoh berikut menyematkan video tutorial memasak selama delapan menit:

html 
<video src="video/tutorial-rendang.mp4" controls width="640" height="360"></video>

Hasil Render:

Pada demo, berkas video tutorial diganti video contoh daring (CC0, dari MDN) agar bisa langsung diputar — demo ini membutuhkan koneksi internet.

Mari kita telaah kode di atas:

  1. Baris 1 (<video ...>): elemen pemutar; atribut src menunjuk berkas MP4 tutorial.
  2. width="640" height="360": ukuran tampilan 16:9; browser menyiapkan ruang sebesar itu sejak awal.
  3. controls: menampilkan bilah kendali bawaan; tanpa atribut ini pengunjung tidak punya tombol apa pun.
  4. Tag penutup (</video>): wajib ditulis; video bukan void element.

Poster dan Teks Fallback #

Dua kelengkapan yang sering dilupakan: gambar sampul sebelum video diputar, dan teks penyelamat untuk browser lama. Keduanya digabung dalam satu contoh:

html 
<video controls width="640" height="360" poster="video/sampul-rendang.jpg">
  <source src="video/tutorial-rendang.mp4" type="video/mp4">
  Browser ini tidak mendukung pemutar video HTML.
  Unduh berkasnya lewat tautan berikut:
  <a href="video/tutorial-rendang.mp4">tutorial-rendang.mp4</a>
</video>

Atribut poster menampilkan gambar sampul — di sini foto piring rendang — selama video belum diputar, menggantikan bidang kosong. Teks di dalam elemen hanya tampil pada browser yang tidak mengenal video; browser modern berhenti membaca fallback begitu source yang didukung ditemukan.

Ringkasan #

  • video menyematkan pemutar; sumbernya lewat src atau anak source.
  • width dan height menyiapkan ruang tampilan sejak awal sehingga tata letak stabil.
  • controls menampilkan tombol putar, jeda, linimasa, volume, dan layar penuh bawaan browser.
  • poster mengisi bidang video sebelum diputar; teks di dalam elemen menjadi fallback.
  • autoplay tanpa muted diblokir oleh kebijakan browser modern.

Satu berkas video belum cukup: tidak semua browser memutar format yang sama. Chapter berikutnya membahas source, elemen kecil yang menyediakan daftar kandidat berkas.