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.
Untuk apa elemen <track>
digunakan?
Apa yang dikontrol oleh atribut poster
?