Audio dan Video

Seperti yang Anda pelajari dalam modul gambar, HTML memungkinkan Anda menyematkan media ke halaman web. Pada bagian ini, kami melihat file audio dan video, termasuk cara menyematkannya, kontrol pengguna, menyediakan placeholder gambar statis untuk video Anda, dan praktik terbaik, termasuk membuat file audio dan video mudah diakses.

<audio> dan <video>

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

Tag <video> dan <audio> pembuka dapat berisi beberapa atribut lain termasuk controls, autoplay, loop, mute, preload, dan atribut global. Elemen <video> juga mendukung height, width, dan Atribut 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 akan ditampilkan. Tag </video> penutup diperlukan, meskipun tidak ada konten di antara keduanya (tetapi harus selalu ada konten fallback , kan?).

Jika tidak ada atribut src yang disertakan pada tag <video> atau <audio> pembuka, sertakan satu atau beberapa elemen <source>, masing-masing dengan atribut src ke file media. Contoh berikut mencakup tiga opsi file media, konten fallback, serta 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 jenis media file yang ditautkan. Hal ini mencegah browser dari pengambilan file media yang tidak dapat didekode.

Dalam atribut type, Anda dapat menyertakan parameter codecs, yang menentukan dengan tepat bagaimana resource dienkode. Codec memberi Anda cara untuk menyertakan pengoptimalan media yang belum didukung di semua browser. Codec dipisahkan dari jenis media dengan titik koma. Misalnya, codec dapat ditulis menggunakan yang 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 untuk dipahami, seperti <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a"> yang menunjukkan bahwa pengkodean MP4 adalah Advanced Video Coding Main Profile Level 4.2. Menjelaskan {i>syntax<i} ini jauh melebihi cakupan pelajaran ini. Jake Archibald memiliki postingan yang menjelaskan cara menentukan parameter codec untuk video AV1 jika Anda ingin mempelajari lebih lanjut.

Saat menampilkan video, secara default, frame pertama video ditampilkan sebagai foto diam saat tersedia. Ini adalah sesuatu yang dapat dikendalikan. Atribut poster memungkinkan sumber gambar ditampilkan saat video sedang didownload hingga lagu diputar. Jika video diputar lalu dijeda, poster tidak akan ditampilkan kembali.

Pastikan Anda menentukan rasio aspek video Anda, karena saat video dimuat, perbedaan ukuran antara poster dan video akan menyebabkan perubahan posisi/geometri.

Selalu sertakan atribut controls boolean. Hal ini membuat kontrol pengguna terlihat, sehingga pengguna dapat mengontrol tingkat audio, membisukan audio sepenuhnya, dan memperluas video ke layar penuh. Menghapus controls akan memberikan pengalaman pengguna yang buruk, terutama jika atribut autoplay boolean disertakan. Perhatikan bahwa beberapa browser tidak akan mematuhi perintah atribut autoplay jika atribut boolean muted dihilangkan karena memutar otomatis umumnya merupakan pengalaman pengguna yang buruk, bahkan saat dibisukan dan dengan kontrol yang dapat dilihat.

Lagu

Di antara tag pembuka dan penutup yang diwajibkan untuk audio dan video, sertakan satu atau beberapa <track> untuk menentukan jalur teks dengan waktu. Contoh berikut mencakup dua file <track>, yang menyediakan subtitel teks dengan waktu 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 crossorigin disertakan.

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

Sertakan subtitles beserta 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 gaya subtitel dapat disesuaikan dengan menargetkan ::cue/ ::cue().

Nilai kind="caption" harus dicadangkan untuk transkripsi dan terjemahan yang menyertakan efek suara dan informasi audio relevan lainnya. Ini bukan hanya untuk penonton tunarungu. Mungkin pengguna tidak dapat menemukan {i>headphone<i}-nya sehingga mereka mengaktifkan {i>caption<i}. Atau mungkin mereka tidak cukup memahami beberapa poin pembicaraan terakhir dari {i>podcast<i} favorit, sehingga dia ingin membaca transkrip untuk mengonfirmasi pemahamannya. Memiliki cara alternatif untuk mengakses konten audio dan video adalah hal yang penting dan nyaman.

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

Menyediakan teks dan subtitel menggunakan format WebVTT membuat video dapat diakses oleh orang-orang gangguan pendengaran. Ingatlah, disabilitas adalah ketidakcocokan antara seseorang dan lingkungan mereka saat ini. Gangguan pendengaran dapat disebabkan bagi pengguna di lingkungan yang bising, speaker yang rusak atau headphone rusak, atau karena pengguna mengalami gangguan pendengaran atau adalah tunarungu. Memastikan konten Anda dapat diakses akan membantu lebih banyak orang daripada yang Anda kira; dapat membantu semua orang.

Pertimbangan video latar belakang

Tim pemasaran atau desain Anda mungkin ingin agar situs Anda menyertakan video latar belakang. Secara umum, ini berarti mereka ingin audio yang dibisukan, pemutaran otomatis, video berulang tanpa kontrol. HTML akan terlihat seperti ini:

<video 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 memberikan kontrol atas pemutaran dan akses ke semua teks. Karena video ini hanya bersifat dekoratif, video ini menyertakan peran ARIA dari none dan menghilangkan konten penggantian apa pun. Untuk meningkatkan performa video yang selalu dibisukan, hapus trek audio dari sumber media Anda.

Jika video diputar selama lima detik atau kurang, panduan aksesibilitas tidak memerlukan mekanisme jeda, dengan atribut boolean loop akan berulang selamanya secara default, melebihi batas waktu lima detik ini, atau batas waktu lainnya. Untuk kebaikan pengalaman pengguna, selalu sertakan metode penjedaan 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 mengaktifkan/menonaktifkan 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 menyertakan tombol dengan atribut dataset yang berisi teks yang akan 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 pengendali peristiwa.

Untuk membuat kontrol yang disesuaikan, gunakan HTMLMediaElement.play() dan HTMLMediaElement.pause(). Saat mengalihkan status pemutaran, juga mengubah 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 memiliki cara untuk mengontrol audio (atau video) meskipun JavaScript gagal. Hapus atribut kontrol hanya setelah instance tombol pengganti dibuat.

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

Selalu sertakan kontrol eksternal jika pengguna tidak dapat mengakses kontrol tersebut, 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 sampai di HTMLMediaElement yang menyediakan beberapa properti, metode, dan peristiwa yang diwarisi oleh HTMLVideoElement dan HTMLAudioElement, dengan HTMLMediaElement menambahkan beberapa properti, metode, dan peristiwa itu sendiri. Ada beberapa Media API lainnya, termasuk TextTrack API. Anda dapat menggunakan Media Capture dan Streams dan MediaDevices API untuk merekam audio dari mikrofon pengguna atau merekam layar pengguna. Web Audio API memungkinkan manipulasi audio live dan rekaman sebelumnya dan streaming, menyimpan, atau mengirim audio ke elemen <audio>.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang audio dan video.