Audio dan video

Seperti yang Anda pelajari dalam modul gambar, HTML memungkinkan penyematan media ke halaman web. Di bagian ini, kita akan melihat file audio dan video, termasuk cara menyematkannya, kontrol pengguna, menyediakan placeholder gambar statis untuk video, dan praktik terbaik, termasuk membuat file audio dan video dapat diakses.

<audio> dan <video>

Elemen <video> dan <audio> dapat digunakan untuk menyematkan pemutar media secara langsung dengan atribut src atau dapat digunakan sebagai elemen penampung untuk serangkaian elemen <source>, yang masing-masing memberikan saran file src. Meskipun <video> dapat digunakan untuk menyematkan file audio, elemen <audio> lebih disarankan untuk menyematkan file suara.

Tag pembuka <video> dan <audio> dapat berisi beberapa atribut lain, termasuk controls, autoplay, loop, mute, preload, dan atribut global. Elemen <video> juga mendukung atribut height, width, dan poster.

<video src="videos/machines.webm" poster="images/machine.jpg" controls>
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

Contoh <video> ini memiliki satu sumber dengan atribut src yang ditautkan ke sumber video. Atribut poster menyediakan gambar untuk ditampilkan saat video dimuat. Terakhir, atribut controls menyediakan kontrol video pengguna.

Konten pengganti disertakan di antara tag pembuka dan penutup. Jika agen pengguna tidak mendukung <video> (atau <audio> konten ini ditampilkan. Tag penutup </video> diperlukan, meskipun tidak ada konten di antara keduanya (tetapi harus selalu ada konten pengganti , bukan?).

Jika tidak ada atribut src yang disertakan pada tag pembuka <video> atau <audio>, sertakan satu atau beberapa elemen <source>, masing-masing dengan atribut src ke file media. Contoh berikut mencakup tiga opsi file media, konten penggantian, dan subtitel bahasa Inggris dan Prancis di antara tag pembuka dan penutup.

<video controls poster="images/machine.jpg">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
  <track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
  <track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" />
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

Setiap turunan <source> menyertakan atribut src yang mengarah ke resource dan atribut type memberi tahu browser tentang jenis media file yang ditautkan. Tindakan ini mencegah browser mengambil file media yang tidak dapat didekode.

Dalam atribut type, Anda dapat menyertakan parameter codecs, yang menentukan secara persis cara resource dienkode. Codec memberi Anda cara untuk menyertakan pengoptimalan media sebagai peningkatan progresif (elemen yang tidak didukung oleh semua browser). Codec dipisahkan dari jenis media dengan titik koma. Misalnya, codec dapat ditulis menggunakan sintaksis intuitif, seperti <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis"> yang menunjukkan bahwa file WebM berisi video VP8 dan audio vorbis.

Codec juga bisa lebih sulit diuraikan, seperti <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a"> yang menunjukkan bahwa encoding MP4 adalah Advanced Video Coding Main Profile Level 4.2. Penjelasan sintaksis ini berada di luar cakupan pelajaran ini. Untuk mengetahui detail selengkapnya, baca postingan Jake Archibald tentang cara menentukan parameter codec untuk video AV1.

Saat menampilkan video, secara default, frame pertama video ditampilkan sebagai foto diam saat tersedia. Hal ini dapat dikontrol. Atribut poster memungkinkan sumber gambar ditampilkan saat video didownload dan hingga diputar. Jika video diputar dan kemudian dijeda, poster tidak akan ditampilkan kembali.

Pastikan untuk menentukan rasio aspek video Anda, karena saat video dimuat, perbedaan ukuran antara poster dan video akan menyebabkan tata ulang dan pengecatan ulang.

Selalu sertakan atribut boolean controls. Hal ini membuat kontrol pengguna terlihat, sehingga pengguna dapat mengontrol level audio, membisukan audio sepenuhnya, dan meluaskan video ke layar penuh. Menghilangkan controls akan menciptakan pengalaman pengguna yang buruk, terutama jika atribut boolean autoplay disertakan. Perhatikan bahwa beberapa browser tidak akan mematuhi direktif atribut autoplay jika atribut boolean muted dihilangkan karena memutar file media secara otomatis umumnya merupakan pengalaman pengguna yang buruk, meskipun dalam kondisi tanpa suara dan dengan kontrol yang terlihat.

Lagu

Di antara tag penutup yang diperlukan dan tag pembuka audio dan video, sertakan satu atau beberapa elemen <track> untuk menentukan trek teks yang disinkronkan dengan waktu. Contoh berikut menyertakan dua file <track>, yang menyediakan subtitel teks yang disesuaikan waktunya dalam bahasa Inggris dan Prancis.

<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Français" kind="subtitles" srclang="fr" lang="fr-fr" src="vtt/subtitles-fr.vtt" />

File jalur, yang ditentukan dalam atribut src, harus dalam format WebVTT (.vtt). File harus berada di domain yang sama dengan dokumen HTML, kecuali jika atribut crossorigin disertakan.

Ada lima nilai terenumerasi untuk atribut kind jalur: subtitles, captions, descriptions, chapters, dan metadata lainnya.

Sertakan subtitles bersama dengan atribut srclang untuk transkripsi dan terjemahan dialog. Nilai setiap atribut label ditampilkan sebagai opsi kepada pengguna. Konten opsi VTT yang dipilih ditampilkan di atas video. Tampilan subtitel dapat diberi gaya dengan menargetkan ::cue/ ::cue().

Nilai kind="caption" harus dicadangkan untuk transkripsi dan terjemahan yang menyertakan efek suara dan informasi audio relevan lainnya. Fitur ini tidak hanya untuk penonton tunarungu. Mungkin pengguna tidak dapat menemukan headphone-nya sehingga dia mengaktifkan teks. Atau mungkin mereka tidak begitu memahami beberapa poin pembicaraan terakhir dari podcast favorit, sehingga mereka ingin membaca transkripnya untuk mengonfirmasi pemahaman mereka. Memiliki cara alternatif untuk mengakses konten audio dan video adalah hal yang penting dan nyaman.

kind="description" adalah untuk deskripsi teks konten visual dalam video bagi pengguna yang tidak dapat melihat video, baik mereka menggunakan sistem tanpa layar seperti Google Home atau Alexa, atau buta.

Menyediakan teks dan subtitel menggunakan format WebVTT membuat video dapat diakses oleh orang-orang dengan gangguan pendengaran. Pendengaran yang terganggu dapat disebabkan oleh pengguna yang berada di lingkungan yang bising, memiliki speaker yang rusak atau headphone yang rusak, atau karena orang tersebut memiliki gangguan pendengaran atau mengidentifikasi diri sebagai Tuli. Memastikan konten Anda dapat diakses akan membantu lebih banyak orang daripada yang Anda kira; hal ini membantu semua orang.

Pertimbangan video latar belakang

Tim pemasaran atau desain Anda mungkin ingin situs Anda menyertakan video latar belakang. Umumnya, ini berarti mereka menginginkan video yang diputar otomatis, berulang, dan tanpa suara dengan tanpa kontrol. HTML-nya mungkin terlihat seperti ini:

<video playsinline autoplay loop muted poster="images/machine.jpg" role="none">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
</video>

Video latar belakang tidak dapat diakses. Konten tidak boleh disampaikan melalui video latar belakang tanpa memberi pengguna kontrol penuh atas pemutaran dan akses ke semua teks. Karena video ini murni dekoratif, video ini menyertakan peran ARIA none dan tidak menyertakan konten penggantian. Untuk meningkatkan performa video yang selalu disetel ke mode senyap, hapus trek audio dari sumber media Anda.

Jika video Anda diputar selama lima detik atau kurang, pedoman aksesibilitas tidak memerlukan mekanisme jeda, tetapi apa pun dengan atribut boolean loop akan diulang selamanya secara default, sehingga melampaui batas waktu lima detik ini, atau batas waktu lainnya. Untuk pengalaman pengguna yang baik, selalu sertakan metode untuk menjeda video. Hal ini paling mudah dilakukan dengan menyertakan controls.

Kontrol media kustom

Untuk menampilkan kontrol video atau audio kustom, bukan kontrol bawaan browser, sertakan atribut controls. Kemudian, gunakan JavaScript untuk menambahkan kontrol media kustom dan menghapus atribut kontrol. Misalnya, Anda dapat menambahkan <button> yang mengalihkan status pemutaran file audio.

<button id="playPause" aria-controls="idOfAudio"
  data-pause-text="Pause audio"
  data-play-text="Play audio">Pause audio</button>

Contoh ini mencakup tombol dengan atribut dataset yang berisi teks yang diperbarui saat pengunjung beralih antara status putar dan jeda. Atribut aria-controls disertakan dengan id elemen yang dikontrol oleh tombol; dalam hal ini, audio. Setiap tombol yang mengontrol audio memiliki pemroses peristiwa.

Untuk membuat kontrol yang disesuaikan, gunakan HTMLMediaElement.play() dan HTMLMediaElement.pause(). Saat mengubah status pemutaran, ubah juga teks tombol:

const pauseButton = document.getElementById('playPause');

pauseButton.addEventListener("click", pauseAndPlay, false);

function pauseAndPlay() {
  console.log(this);
  const media = document.getElementById(this.getAttribute('aria-controls'));

  if (media.paused) {
    media.play();
    this.innerText = this.dataset.pauseText;
  } else {
    media.pause();
    this.innerText = this.dataset.playText;
  }
}

Dengan menyertakan atribut controls, pengguna dapat mengontrol audio (atau video) meskipun JavaScript gagal. Hanya hapus atribut kontrol setelah tombol pengganti dibuat.

document.querySelector('[aria-controls]').removeAttribute('controls');

Selalu sertakan kontrol eksternal saat pengguna tidak dapat mengakses kontrol, seperti pada video latar belakang yang kontrolnya disembunyikan di balik konten situs. Penting untuk memahami dasar-dasar persyaratan aksesibilitas media untuk mengakomodasi pengguna dengan kebutuhan lingkungan dan sensorik yang berbeda, termasuk jutaan orang dengan gangguan pendengaran dan gangguan penglihatan. Kita baru saja membahas HTMLMediaElement yang menyediakan beberapa properti, metode, dan peristiwa yang diwarisi oleh HTMLVideoElement dan HTMLAudioElement, dengan HTMLMediaElement menambahkan beberapa properti, metode, dan peristiwanya sendiri. Ada beberapa Media API lainnya, termasuk TextTrack API. Anda dapat menggunakan API Media Capture and Streams dan MediaDevices untuk merekam audio dari mikrofon pengguna atau merekam layar pengguna. Web Audio API memungkinkan memanipulasi audio live dan yang telah direkam sebelumnya serta melakukan streaming, menyimpan, atau mengirim audio ke elemen <audio>.

Periksa pemahaman Anda

Uji pengetahuan Anda tentang audio dan video.