Memahami TAG track HTML

TokoDaring.Com – Memahami TAG track HTML. Tag HTML <track> merupakan alat yang ampuh untuk meningkatkan aksesibilitas dalam pengembangan web, khususnya saat bekerja dengan elemen video dan audio. Tag ini memungkinkan pengembang untuk menyediakan trek teks berwaktu seperti teks terjemahan, subtitel, dan deskripsi, sehingga konten multimedia lebih mudah diakses oleh khalayak yang lebih luas.

Artikel Seri HTML Lainnya:

Tag <map> HTML: Menentukan peta gambar

Memahami TAG track HTML

Artikel ini membahas dasar-dasar tag <track>, atributnya, dan praktik terbaik untuk penerapannya. Sehingga anda dapat mengerti dan Memahami TAG track HTML sepenuhnya dengan benar.

1. Apa itu Tag HTML <track>?

Tag <track> digunakan dalam elemen <video> atau <audio> untuk menentukan trek teks seperti subtitel, teks terjemahan, atau metadata. Trek ini dapat meningkatkan pengalaman pengguna, khususnya bagi penyandang disabilitas atau mereka yang membutuhkan terjemahan dalam berbagai bahasa.

Sintaks Dasar Tag <track>, tag <track> mudah diterapkan. Dalam contoh ini, video memiliki subtitel dalam bahasa Inggris, sehingga lebih mudah diakses.

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

Penggunaan dalam Elemen Video dan Audio, Meskipun paling umum digunakan dengan tag <video>, tag <track> juga dapat digunakan dengan elemen <audio> untuk mendeskripsikan suara atau menambahkan teks tersinkronisasi untuk konten audio.

Meningkatkan Aksesibilitas, Dengan menyediakan teks, subtitel, dan trek teks lainnya, tag <track> membantu memenuhi standar aksesibilitas dan meningkatkan kegunaan bagi orang-orang dengan gangguan pendengaran, penutur non-asli, atau individu di lingkungan tempat suara tidak dapat diputar.

2. Atribut Utama Tag <track>

Tag <track> mencakup beberapa atribut yang memungkinkan pengembang untuk mengontrol jenis trek yang digunakan, bahasa, dan cara trek ditampilkan. Atribut ini penting untuk memaksimalkan fungsionalitas tag.

Atribut src, Atribut src menentukan jalur ke file teks (biasanya dalam format WebVTT) yang berisi teks berjangka waktu. Tanpa atribut ini, tag <track> tidak akan berfungsi. File tersebut harus berisi isyarat (cap waktu dan teks) yang sesuai dengan linimasa media.

<track src="captions_en.vtt" kind="captions">

Atribut kind
Atribut kind menentukan jenis teks yang disediakan. Nilai umum meliputi:

• subtitles: Terjemahan dialog, ditujukan untuk penonton yang tidak mengerti bahasa yang diucapkan.
• captions: Mencakup dialog dan elemen non-ucapan seperti efek suara, yang ditujukan untuk penonton dengan gangguan pendengaran.
• descriptions: Deskripsi kejadian di layar untuk penonton yang memiliki gangguan penglihatan.
• metadata: Informasi tentang media yang tidak terlihat oleh pengguna.

Atribut srclang dan label
Atribut srclang menentukan bahasa teks, dan label menyediakan nama yang mudah digunakan untuk teks, yang muncul di antarmuka pemutar. Atribut ini berguna saat menawarkan beberapa teks dalam berbagai bahasa atau format:

<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">

3. Manfaat Menggunakan Tag <track>

Menyertakan tag <track> ke dalam konten multimedia Anda memberikan beberapa manfaat, mulai dari meningkatkan aksesibilitas hingga mematuhi persyaratan hukum.

Meningkatkan Aksesibilitas untuk Semua Pengguna
Dengan menyediakan teks dan subtitel, tag <track> memastikan bahwa pengguna dengan gangguan pendengaran atau penutur non-asli dapat menikmati konten multimedia sepenuhnya. Misalnya, teks tidak hanya menggambarkan kata-kata yang diucapkan tetapi juga efek suara dan musik.

Memenuhi Standar Hukum
Banyak negara memiliki persyaratan hukum terkait aksesibilitas konten daring, seperti Americans with Disabilities Act (ADA) di Amerika Serikat. Menggunakan tag <track> membantu situs Anda mematuhi peraturan ini dengan membuat video dapat diakses oleh semua orang.

Meningkatkan SEO dan Keterlibatan
Teks juga dapat diindeks oleh mesin pencari, yang dapat membantu meningkatkan SEO. Selain itu, pengguna cenderung lebih tertarik dengan konten yang menawarkan subtitel atau teks, karena mereka dapat melihatnya di lingkungan yang berbeda, seperti tempat yang bising atau tenang.

4. Masalah Umum dan Solusinya

Meskipun tag <track> mudah diterapkan, ada beberapa tantangan yang mungkin dihadapi pengembang. Memahami masalah umum ini akan membantu memastikan integrasi yang lancar.

Dukungan Peramban untuk Tag <track>
Tag <track> didukung oleh sebagian besar peramban modern, tetapi versi lama atau peramban seluler tertentu mungkin tidak sepenuhnya mendukung semua jenis trek. Untuk memastikan kompatibilitas lintas peramban, selalu uji trek media dan teks Anda di berbagai lingkungan.

Atribut kind Salah atau Hilang
Penggunaan atribut kind yang salah dapat menyebabkan trek tidak ditampilkan dengan benar atau tidak ditampilkan sama sekali. Pastikan untuk mengkategorikan trek Anda dengan benar—apakah itu teks, subtitel, atau jenis lainnya—berdasarkan tujuan yang dimaksudkan.

Kesalahan Pemformatan dalam File WebVTT
File teks yang dirujuk oleh atribut src biasanya dalam format WebVTT (Web Video Text Tracks). Kesalahan pemformatan dalam file ini dapat menyebabkan masalah seperti teks tidak selaras atau kegagalan untuk ditampilkan. Pastikan stempel waktu dan sintaksis sudah benar dalam file WebVTT:

WEBVTT

00:00:00.000 --> 00:00:10.000
Hello, welcome to the video.

5. Praktik Terbaik untuk Menggunakan Tag <track>

Untuk memanfaatkan tag <track> secara maksimal, ikuti praktik terbaik untuk menerapkan trek teks. Praktik ini akan membantu memastikan konten multimedia Anda dapat diakses, ramah pengguna, dan mematuhi standar industri.

Sediakan Berbagai Pilihan Bahasa
Jika audiens Anda beragam, pertimbangkan untuk menawarkan subtitel atau teks dalam berbagai bahasa. Hal ini meningkatkan aksesibilitas dan kegunaan konten Anda bagi pengguna di seluruh dunia.

Pastikan Transkripsi yang Akurat
Saat membuat teks, pastikan teks tersebut secara akurat mencerminkan kata-kata yang diucapkan dan efek suara yang penting. Teks yang ditranskripsi dengan buruk dapat membingungkan pemirsa dan dapat merusak pengalaman pengguna.

Uji di Berbagai Peramban dan Perangkat
Selalu uji implementasi <track> Anda di berbagai peramban dan perangkat untuk memastikan kompatibilitas. Periksa apakah teks atau subtitel ditampilkan dengan benar dan disinkronkan dengan konten video atau audio.

Artikel tutorial HTML lainnya, lihat kategori artikel Coding For Fun.

FAQ (Frequently Asked Question) atau Tanya Jawab Umum Tentang Memahami TAG track HTML

FAQ (Frequently Asked Question) atau Tanya Jawab Umum Tentang Memahami TAG track HTML.

Referensi: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track.