Seperti yang Anda pelajari di modul gambar, HTML memungkinkan penyematan media ke dalam halaman web. Di bagian ini, kami membahas file audio dan video, termasuk cara menyematkannya, kontrol pengguna, menyediakan placeholder gambar statis untuk video Anda, serta praktik terbaik, termasuk membuat file audio dan video mudah 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 cocok untuk menyematkan
file suara.
Tag <video> dan <audio> pembuka dapat berisi beberapa atribut lainnya 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 penggantian 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 seharusnya selalu ada konten penggantian , 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 penggantian,
serta subtitel bahasa Inggris dan Prancis 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. Hal ini mencegah browser
mengambil file media yang tidak dapat didekode.
Dalam atribut type, Anda dapat menyertakan parameter codecs,
yang menentukan secara persis cara encoding resource. 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
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 mungkin 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. Menjelaskan {i>syntax<i} ini di luar
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 gambar diam saat tersedia.
Ini adalah sesuatu yang dapat dikontrol. Atribut poster memungkinkan sumber gambar ditampilkan saat video sedang didownload
dan hingga diputar. Jika video diputar lalu dijeda, poster tidak akan ditampilkan ulang.
Pastikan untuk menentukan rasio lebar tinggi video Anda, karena saat video dimuat, perbedaan ukuran antara poster dan video akan menyebabkan perubahan posisi/geometri dan penggambaran ulang.
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.
Menghilangkan controls akan menciptakan pengalaman pengguna yang buruk, terutama jika atribut autoplay boolean disertakan. Perlu diperhatikan bahwa beberapa
browser tidak akan mematuhi perintah atribut autoplay jika atribut boolean muted dihilangkan karena memutar otomatis
file media umumnya merupakan pengalaman pengguna yang buruk, meskipun jika dibisukan dan dengan kontrol yang terlihat.
Lagu
Di antara tag pembuka dan penutup yang diperlukan pada audio serta video, sertakan satu atau beberapa elemen <track>
untuk menentukan trek teks dengan waktu. Contoh berikut menyertakan 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 trek, 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 yang disebutkan untuk atribut kind jalur: subtitles, captions, descriptions, chapters, dan metadata lainnya.
Menyertakan 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. Gaya tampilan subtitel dapat disesuaikan dengan menargetkan ::cue/ ::cue().
Nilai kind="caption" harus dicadangkan untuk transkripsi dan terjemahan yang menyertakan efek suara dan informasi audio lain yang relevan.
Fitur ini tidak hanya ditujukan bagi penonton tunarungu. Mungkin pengguna tidak dapat menemukan headphone-nya, jadi mereka mengaktifkan teks. Atau mungkin mereka belum memahami beberapa poin pembicaraan terakhir dari podcast favorit, jadi mereka ingin membaca transkrip untuk mengkonfirmasi pemahaman mereka.
Memiliki cara alternatif untuk mengakses konten audio dan video sangatlah penting dan nyaman.
kind="description" digunakan untuk deskripsi teks konten visual dalam video bagi pengguna yang tidak dapat melihat video, baik
mereka yang menggunakan sistem tanpa layar seperti Google Home atau Alexa, maupun tunanetra.
Menyediakan teks dan subtitel menggunakan format WebVTT membuat video dapat diakses oleh orang dengan gangguan pendengaran. Ingat, disabilitas adalah ketidakcocokan antara seseorang dan lingkungannya saat ini. Gangguan pendengaran dapat disebabkan karena pengguna berada di lingkungan yang bising, memiliki speaker yang rusak atau headphone yang rusak, atau karena pengguna mengalami kerusakan pendengaran atau tunarungu. Memastikan bahwa konten Anda dapat diakses akan membantu lebih banyak orang; hal ini membantu semua orang.
Pertimbangan video latar belakang
Tim pemasaran atau desain mungkin ingin agar situs Anda menyertakan video latar belakang. Umumnya, hal ini berarti pengguna menginginkan video yang dibisukan, diputar otomatis, dan 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 memberi pengguna
kontrol penuh atas pemutaran dan akses ke semua teks. Karena hanya sekadar 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, tetapi apa pun
dengan atribut boolean loop akan berulang selamanya secara default, melebihi batas waktu lima detik ini, atau yang lainnya. Untuk memberikan
pengalaman pengguna yang baik, selalu sertakan metode 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. Lalu, gunakan
JavaScript untuk menambahkan kontrol media kustom dan menghapus atribut kontrol. Misalnya, Anda dapat menambahkan <button> yang mengubah
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 putar,
juga alihkan 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 tombol pengganti dibuatkan instance-nya.
document.querySelector('[aria-controls]').removeAttribute('controls');
Selalu sertakan kontrol eksternal saat pengguna tidak dapat mengakses kontrol, seperti pada video latar belakang dengan kontrol yang tersembunyi
di balik konten situs. Penting untuk memahami dasar-dasar persyaratan aksesibilitas media guna mengakomodasi pengguna dengan
berbagai kebutuhan lingkungan dan sensorik, termasuk jutaan orang dengan gangguan pendengaran dan penglihatan.
Kita baru saja membahas HTMLMediaElement yang menyediakan beberapa properti, metode, dan peristiwa yang diwarisi oleh
HTMLVideoElement dan
HTMLAudioElement, dengan HTMLMediaElement yang menambahkan beberapa properti,
metode, dan peristiwanya sendiri. Ada beberapa Media API lainnya,
termasuk TextTrack API. Anda dapat menggunakan API Media Capture and Stream
serta MediaDevices untuk merekam audio dari mikrofon pengguna
atau merekam layar pengguna. Web Audio API
memungkinkan manipulasi audio langsung dan rekaman serta streaming, penyimpanan, atau pengiriman audio ke elemen <audio>.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang audio dan video.
Apa tujuan elemen <track>?
Apa yang dikontrol oleh atribut poster?