Audio dan Video

Elemen video dan audio menyajikan rekaman gerak dan suara langsung dari markup, tanpa plugin dan tanpa skrip tambahan. Topik ini membahas kedua elemen beserta atribut pentingnya, cara menyediakan beberapa format sekaligus melalui elemen source, konten fallback untuk browser lama, serta format media yang lazim ditemui. Setelah mengikuti topik ini, sebuah halaman pemutar media sederhana dengan sumber berganda dapat disusun.

Elemen video dan atribut pentingnya#

Elemen video menyisipkan rekaman video ke dalam halaman dan, dengan atribut controls, menyediakan antarmuka pemutar bawaan browser yang berisi tombol putar, pengatur volume, dan bilah kemajuan. Tanpa controls, rekaman hanya berupa bingkai diam yang tidak dapat diputar melalui antarmuka, sehingga atribut ini hampir selalu wajib pada konten yang memang ditujukan untuk diputar. Ukuran tampilnya dinyatakan dengan width dan height yang menyiapkan ruang dengan rasio yang benar sebelum berkas rekaman selesai dimuat, sebagaimana pasangan atribut itu bekerja pada img.

Atribut lain mengatur perilaku pemutaran, sebagaimana dirangkum tabel berikut.

Atribut autoplay memerlukan perlakuan khusus karena dibatasi browser. Pemutaran otomatis yang membawa suara umumnya diblokir, sedangkan pemutaran otomatis dalam keadaan bisu diperbolehkan, sehingga autoplay pada praktiknya selalu disertai muted. Atribut preload hanya berupa petunjuk, bukan perintah, dan browser bebas menyimpanginya untuk menghemat kuota pengguna. Pada perangkat bergerak, atribut playsinline menjaga rekaman tetap tampil di dalam halaman alih-alih mengambil seluruh layar.

<video src="pengantar.webm" controls width="640" height="360"
  poster="sampul.jpg" preload="metadata"></video>

Elemen audio#

Elemen audio bekerja dengan cara yang sama seperti video, tetapi tanpa area gambar, sehingga tampilannya hanya berupa bilah pemutar yang berisi tombol putar, waktu berjalan, dan pengatur volume. Atribut controls, loop, muted, preload, dan autoplay berlaku dengan arti yang sama. Sumbernya dapat ditulis langsung pada atribut src, sedangkan konten yang ditulis di dalam elemen menjadi teks fallback bagi browser yang tidak mengenal elemen ini.

<audio controls src="narasi.mp3">
  Browser ini tidak mendukung elemen audio. Narasinya tersedia untuk diunduh.
</audio>

Perbedaannya dengan video terletak pada ruang yang disiapkan. Elemen audio tidak memerlukan width dan height, karena tinggi bilah pemutarnya sudah ditentukan browser. Apabila rekaman berdiri sendiri tanpa konteks visual, elemen audio juga dapat dibungkus elemen figure bersama figcaption agar pemutar memiliki label yang terbaca oleh pembaca layar.

Pola sumber berganda pada bagian berikutnya juga berlaku penuh untuk audio, yaitu beberapa elemen source dengan atribut type yang diperiksa bergantian. Pola itu berguna ketika satu narasi perlu tersedia dalam MP3 dan OGG sekaligus. Adapun tinggi bilah pemutarnya tetap sama apa pun format yang terpilih, sehingga perpindahan formatnya tidak mengubah tampilan halaman.

Sumber berganda dengan elemen source#

Format rekaman tidak seragam di semua browser, sehingga satu berkas saja dapat membuat sebagian pengguna tidak dapat memutar kontennya. Elemen source menyelesaikan hal itu dengan menyediakan beberapa berkas pada satu pemutar. Browser membaca daftar source dari atas ke bawah, memeriksa atribut type yang berisi tipe MIME setiap kandidat, lalu memuat berkas pertama yang formatnya didukung. Pemeriksaan lewat type mencegah pengunduhan berkas yang ternyata tidak dapat diputar.

Diagram berikut memperlihatkan urutan pemeriksaan tersebut beserta jalan keluarnya.

Saat elemen source digunakan, atribut src pada video dibiarkan hilang karena sumber sudah dinyatakan oleh elemen source di dalamnya. Kedudukan teks di dalam video sering disalahpahami. Teks fallback itu hanya ditampilkan browser yang tidak mendukung elemen video sama sekali. Browser modern yang mendukung elemen ini tetapi gagal memuat semua sumber menampilkan keadaan error pada pemutarnya, bukan teks fallback itu.

<video controls width="640" height="360">
  <source src="pengantar.webm" type="video/webm">
  <source src="pengantar.mp4" type="video/mp4">
  Browser ini tidak mendukung elemen video. Rekamannya tersedia untuk diunduh.
</video>

Urutan sumber dapat disusun menurut prioritas. Berkas berformat terbuka dengan ukuran yang cenderung lebih kecil dapat diletakkan lebih dahulu, disusul berkas MP4 yang dukungannya paling luas sebagai jaring pengaman. Dengan susunan itu, browser modern memperoleh kandidat pertama, sedangkan browser yang lebih tua tetap terlayani oleh kandidat kedua.

Contoh berkas utuh#

Berkas berikut menggabungkan pemutar video dengan dua sumber dan pemutar audio dalam satu halaman. Tiga berkas medianya tidak disertakan pada topik ini karena berkas media yang berisi rekaman nyata tidak dapat dibuat di sini. Simpan pemutar.html beserta rekaman pilihan sendiri dengan nama pengantar.webm atau pengantar.mp4 serta narasi.mp3 dalam satu folder, lalu buka halamannya di browser. Bila salah satu format video tidak tersedia, browser otomatis turun ke kandidat berikutnya sesuai diagram sebelumnya.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Pemutar media sederhana</title>
  <style>
    body { font-family: sans-serif; max-width: 40rem; margin: 0 auto; padding: 0 1rem; }
    video, audio { display: block; width: 100%; margin: 0.5rem 0 1.5rem; }
  </style>
</head>
<body>
  <h1>Rekaman pertemuan kelas</h1>

  <video controls width="640" height="360">
    <source src="pengantar.webm" type="video/webm">
    <source src="pengantar.mp4" type="video/mp4">
    Browser ini tidak mendukung elemen video. Rekamannya dapat diunduh pada
    tautan yang disediakan.
  </video>

  <audio controls src="narasi.mp3">
    Browser ini tidak mendukung elemen audio. Narasinya dapat diunduh pada
    tautan yang disediakan.
  </audio>
</body>
</html>

Berkas itu dapat dibuka langsung tanpa server dan tanpa langkah build. Seluruh kendali pemutaran diserahkan kepada atribut controls, sehingga tidak ada satu baris JavaScript pun di dalamnya. Apabila gambar sampul diinginkan, atribut poster beserta berkas gambarnya cukup ditambahkan pada elemen video.

Perilaku berpindah ke kandidat berikutnya dapat diuji dengan sengaja mengganti nama salah satu berkas medianya untuk sementara, misalnya pengantar.webm. Browser akan melompat ke pengantar.mp4 tanpa perlu satu pun perubahan markup. Uji kecil itu memperlihatkan bahwa ketahanan pemutarnya disusun pada daftar sumbernya, bukan pada kandungan satu berkas.

Format media umum#

Dua kelompok format menguasai praktik web saat ini, yaitu kelompok video berkas MP4 dan WebM serta kelompok audio berkas MP3 dan OGG. Nama formatnya merujuk pada wadah (container) beserta pengodean (codec) di dalamnya, dan atribut type menuliskan keduanya sekaligus, misalnya video/webm untuk wadah WebM dengan VP8 atau VP9.

Strategi yang umum adalah menyediakan format terbuka lebih dahulu, kemudian MP4 sebagai kandidat penutup. Untuk audio, MP3 sendirian sudah mencakup hampir semua browser, tetapi menyertakan OGG tetap berguna apabila ukuran berkas menjadi pertimbangan.

Dukungan format pada browser yang sedang digunakan dapat diperiksa melalui metode canPlayType. Metode ini menerima string tipe MIME beserta codec-nya, lalu menjawab probably, maybe, atau string kosong, dengan arti berturut-turut hampir pasti didukung, mungkin didukung, dan tidak didukung. Skrip berikut memerlukan browser sehingga hanya ditampilkan, bukan dieksekusi di sini.

// tidak-dijalankan
const video = document.createElement("video");

console.log(video.canPlayType('video/webm; codecs="vp9"'));
console.log(video.canPlayType("video/mp4"));

Kesalahan umum#

Melupakan atribut controls. Tanpa atribut itu, video tampil sebagai bingkai diam dan audio tidak tampak sama sekali, sehingga pengguna tidak memiliki cara memutar rekamannya. Tambahkan controls pada setiap pemutar yang memang ditujukan untuk diputar.

Mengandalkan teks fallback untuk kegagalan berkas. Teks di dalam video hanya muncul pada browser yang tidak mengenal elemennya, bukan ketika berkas medianya gagal diunduh. Kegagalan format ditangani dengan beberapa elemen source yang membawa type, bukan dengan kalimat pengganti.

Menaruh autoplay tanpa muted. Browser memblokir pemutaran otomatis yang bersuara, sehingga rekaman tetap diam dan pengguna hanya melihat pemutar yang tidak berjalan. Sertakan muted bersama autoplay, atau lepas autoplay dan biarkan pengguna menekan tombol putar.

Menulis type yang tidak sesuai isi berkasnya. Browser memercayai type tanpa membuka berkasnya, sehingga kandidat yang diberi tipe keliru dilewati seolah-olah tidak didukung. Cocokkan nilai type dengan format berkasnya yang sebenarnya, misalnya video/mp4 untuk berkas MP4.

Ringkasan#

• video dan audio menyajikan media dengan antarmuka bawaan melalui atribut controls, tanpa plugin dan tanpa skrip.
• width dan height pada video menyiapkan ruang dengan rasio yang benar, sedangkan poster, preload, loop, dan muted mengatur perilaku pemutaran.
• Beberapa elemen source dengan atribut type membuat browser memuat format pertama yang didukung, dan pasangan WebM dengan MP4 serta MP3 dengan OGG meliputi kebutuhan umum.
• autoplay dibatasi browser sehingga hampir selalu disertai muted, sedangkan teks di dalam elemen hanyalah fallback untuk browser lama.

Referensi#

• Elemen video — MDN Web Docs — Dokumentasi atribut video beserta catatan pembatasan autoplay.
• Elemen audio — MDN Web Docs — Dokumentasi elemen audio beserta atribut-atributnya.
• Elemen source — MDN Web Docs — Dokumentasi elemen source dan cara browser memilih sumbernya.
• Media elements — HTML Living Standard — WHATWG — Spesifikasi resmi elemen video, audio, dan source.
• Media container formats (file types) — MDN Web Docs — Daftar wadah media web beserta dukungan browsernya.