Html Track Tag

Tutorial HTML <track>

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

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

Element ini sangat berkhasiat untuk memastikan user atau pengguna sanggup 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 dipakai untuk memilih Jalur track harus diaktifkan dalam keadaan default, sebelum diubahsuaikan 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 sanggup merubahnya kepilihan yang lain jikalau setingan default tidak sesuai.

Catatan : attribute ini hanya boleh disematkan atau ditulis satu kali saja per file media baik itu audio ataupun video. Misalnya menyerupai pola 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 yaitu default [1]

kind

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

Value atau nilai attribute ini yaitu sebagai berikut :

• captions
  • Berupa keterangan tertutup yang menawarkan transkripsi atau pengalihan tuturan (yang bersifat bunyi)
  • Berisi info penting Non-Verbal menyerupai isyarat musik, efek suara, lambang-lambang bunyi, yang memperlihatkan atau menjelaskan sumber isyarat.
• chapters
  • Judul penggalan yang dipakai ketika pengguna sedang menavigasi sumber file media.
• descriptions
  • Penjelasan berupa teks (Textual description)
• metadata
  • Trak yang dijalankan oleh script
  • contoh Penulisan file vtt memakai 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 pinjaman terjemahan dari obrolan bahasa yang tidak dimengerti, misal media video yang memakai bahasa china sanggup dipahami dengan pinjaman terjebahan bahasa lainnya.
  • Dapat juga dipakai sebagai Teks berupa info tambahan, menyerupai menampilkan waktu pembuatan, klarifikasi singkat pada waktu tertentu, lokasi adegan dan lain sebagainya.

label

Attribute ini dipakai untuk memilih judul dari track, yang sanggup dilihat dan diatur oleh user.

Nilai atau value attribute ini yaitu Teks

src

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

Nilai atau value attribute ini yaitu URL

srclang

Attribute ini dipakai untuk memilih jenis bahasa yang dipakai pada file .vtt

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

1. Global Attributes HTML.

Event Attributes:

Element <track> meliputi 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 memilih versi minimal browser
• ? tidak diketahui

Default CSS :

Browser yang support dengan element <track>, memiliki 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 sanggup diterapkan, terlebih jikalau memakai browser mobile.
2. Sumber daya URL
   • Terhambatnya saluran url file .vtt jikalau file .vtt berada diluar saluran atau berbeda domain, misal eksternal file. Biasanya browser akan memblokir pemuatan, dengan balasan 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 jikalau hanya memiliki permasalahan sama menyerupai diatas, terlebih untuk Point ke dua

Untuk ketika ini solusi dari permasalahan diatas yaitu dengan tidak memakai element <track> dan menggantinya dengan manipulasi HTML memakai JavaScript baik itu javascript mentah ataupun memakai Library

Karena dengan memakai Javascript lebih fleksibel dalam melaksanakan kontrol, dan tidak hanya teks saja yang sanggup dikontrol penggunaan html pun sangat sanggup untuk ditampilkan

Berbagi :