HTML track Tag

Tutorial HTML <track>

Element HTML track digunakan sebagai anak element HTML <audio> dan <video>.

Element ini berfungsi menambahkan sumber data tambahan berupa Teks yang berjangka atau berbasis waktu ke element media induknya (audio atau video)

Element ini sangat berguna untuk memastikan user atau pengguna dapat sepenuhnya memahami konten yang disajikan dalam format video atau audio. Dengan kata lain, element ini mewakili fitur internasionalisasi dan aksesibilitas yang penting.

Contoh HTML <track>

<video controls>
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
  <track label="Indonesian" kind="subtitles" srclang="id" src="subtitles_id.vtt" default="default"/>
  <track label="English" kind="subtitles" srclang="en" src="subtitles_en.vtt"/>
  <track label="Japanese" kind="subtitles" srclang="ja" src="subtitles_ja.vtt"/>
</video>

Attribute HTML <track>

default

Attribute ini digunakan untuk menentukan Jalur track harus diaktifkan dalam keadaan default, sebelum disesuaikan atau dirubah oleh user.

Contoh nya sebagai berikut :

<video controls>
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
  <track label="Indonesian" kind="subtitles" srclang="id" src="subtitles_id.vtt"/>
  <track label="English" kind="subtitles" srclang="en" src="subtitles_en.vtt" default="default"/>
  <track label="Japanese" kind="subtitles" srclang="ja" src="subtitles_ja.vtt"/>
</video>

Contoh diatas menjelaskan, element track dengan label English akan otomatis aktif secara default, dan user dapat merubahnya kepilihan yang lain jika setingan default tidak sesuai.

Catatan : attribute ini hanya boleh disematkan atau ditulis satu kali saja per file media baik itu audio ataupun video. Misalnya seperti contoh berikut ;

<!-- video 1 -->
<video controls id="video1">
  <track src="data-1.vtt">
  <track src="data-2.vtt" default>
  <track src="data-3.vtt">
</video>

<!-- video 2 -->
<video controls id="video2">
  <track src="sub-1.vtt" default>
  <track src="sub-2.vtt">
  <track src="sub-3.vtt">
</video>

Nilai atau value attribute ini adalah default [1]

kind

Attribute ini digunakan untuk menentukan jenis track apa yang akan digunakan pada file media dan bagaimana atau sebagai apa teks track tersebut digunakan

Value atau nilai attribute ini adalah sebagai berikut :

• captions
  • Berupa keterangan tertutup yang memberikan transkripsi atau pengalihan tuturan (yang bersifat bunyi)
  • Berisi informasi penting Non-Verbal seperti isyarat musik, efek suara, lambang-lambang bunyi, yang menunjukkan atau menjelaskan sumber isyarat.
• chapters
  • Judul bab yang digunakan ketika pengguna sedang menavigasi sumber file media.
• descriptions
  • Penjelasan berupa teks (Textual description)
• metadata
  • Trak yang dijalankan oleh script
  • contoh Penulisan file vtt menggunakan script:

    WEBVTT FILE
    
    Teks Pertama
    00: 01: 15.200-- > 00: 02: 17.800 {
      "title": "Judul 1",
      "description": "Deskripsi",
      "src": "image-1.jpg",
      "href": "http://example.com/page-1"
    }
    
    Teks Kedua
    00: 02: 18.800-- > 00: 03: 01.600 {
      "stateType": "chapter",
      "title": "Bagian 2",
      "description": "Deskripsi penjelasan",
      "src": "data-1.jpg",
      "href": "http://example.com/page-2"
    }

• subtitles
  • Digunakan sebagai bantuan terjemahan dari dialog bahasa yang tidak dimengerti, misal media video yang menggunakan bahasa china dapat dipahami dengan bantuan terjebahan bahasa lainnya.
  • Dapat juga digunakan sebagai Teks berupa informasi tambahan, seperti menampilkan waktu pembuatan, penjelasan singkat pada waktu tertentu, lokasi adegan dan lain sebagainya.

label

Attribute ini digunakan untuk menentukan judul dari track, yang dapat dilihat dan diatur oleh user.

Nilai atau value attribute ini adalah Teks

src

Attribute ini digunakan untuk menentukan alamat atau URL dari file .vtt. Attribute ini wajib ditulis atau disematkan dan harus berupa URL yang valid

Nilai atau value attribute ini adalah URL

srclang

Attribute ini digunakan untuk menentukan jenis bahasa yang digunakan pada file .vtt

Catatan : Dalam penulisan Kode bahasa, penulisannya harus valid dan sesuai dengan BCP 47 (kode negara yang disingkat pada dokumen HTML). Anda dapat melihat nya pada link berikut :

1. https://r12a.github.io/app-subtags/
2. https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry

Info : Jika attribute kind dengan value subtitles (kind="subtitles") disematkan pada element <track>, maka attribute srclang wajib untuk ditulis.

Nilai atau value attribute ini adalah Kode_bahasa

Daftar Penjelasan :

• [1] Attribute ini bersifat boolean, artinya nilai atau value attribute ini bisa ditulis ataupun tidak

Global Attributes:

Element <track> mencakup Global Attributes HTML.

Event Attributes:

Element <track> mencakup Event Attributes HTML.

Browser Support HTML <track>:

Desktop

Chrome	23
Safari	6
Firefox	31
Opera	12.1
IE	10
Edge	Ya

Mobile

Android webview	25
Chrome Android	25
Edge mobile	Ya
Firefox Android	31
IE mobile	?
Opera Android	?
iOS Safari	?

Table Info

• Nilai pada table menentukan versi minimal browser
• ? tidak diketahui

Default CSS :

Browser yang support dengan element <track>, mempunyai nilai default :

/* tidak ada */

Permasalahan dan Solusi Element HTML <track>.

Berikut beberapa permasalahan yang mungkin dihadapi dalam penggunaan element ini.

1. Browser support
   • Masih banyaknya browser yang tidak mendukung fitur ini terutama browser mobile
   • Fitur mendukung, tetapi tidak semua attribute dapat diterapkan, terlebih jika menggunakan browser mobile.
2. Sumber daya URL
   • Terhambatnya akses url file .vtt jika file .vtt berada diluar akses atau berbeda domain, misal eksternal file. Biasanya browser akan memblokir pemuatan, dengan tanggapan kurang lebih sebagai berikut :
     Text track from origin 'ini-url-file' has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute. Origin 'null' is therefore not allowed access.

Solusi

Catatan : ini hanya pendapat saya dan jika hanya mempunyai permasalahan sama seperti diatas, terlebih untuk Point ke dua

Untuk saat ini solusi dari permasalahan diatas adalah dengan tidak menggunakan element <track> dan menggantinya dengan manipulasi HTML menggunakan JavaScript baik itu javascript mentah ataupun menggunakan Library

Karena dengan menggunakan Javascript lebih fleksibel dalam melakukan kontrol, dan tidak hanya teks saja yang bisa dikontrol penggunaan html pun sangat bisa untuk ditampilkan