Mësime | HTML & CSS | Nëntituj për audio ose video

Përdorimi

Elementi <track> mundëson tregimin e tekstit për audio dhe video. Skedari me nëntituj mund të shkruhet me një aplikacion të thjeshtë të tekstit dhe të ruhet si skedar me prapashtesën .vtt (Video Text Track).

Në skedarin .vtt tregohet koha (fillimi deri tek përfundimi) dhe pozita a tregimit. Teksti dhe sfondi i tij mund të formatohen me CSS.

Demonstrim

HTML

<div class="mbajtesi-me-video">
<video controls src="lord-of-the-rings.mp4">
<track default kind="captions" srclang="sq" src="lotr.vtt" />
</video> 
</div>

VTT

WEBVTT
Kind: captions
Language: sq

00:00:06.210 --> 00:00:09.418 position:50% align:center size:100% line:80%
KISHA DASHUR QË TË MOS 
MË VINTE KURRË UNAZA

00:00:11.000 --> 00:00:12.397 position:50% align:center size:100% line:80%
KISHA DASHUR QË TË MOS 
KISHTE NDODHUR KURRË KJO

00:00:13.163 --> 00:00:16.023 position:50% align:center size:100% line:80%
ASHTU MENDOJNË TË GJITHË QË 
JETOJNË TË SHOHIN KOHËRA TË TILLA

00:00:16.121 --> 00:00:18.193 position:50% align:center size:100% line:80%
POR NUK ËSHTË PËR ATA QË TË VENDOSIN

00:00:19.009 --> 00:00:20.210 position:50% align:center size:100% line:80%
GJITHÇKA QË NE DUHET TË VENDOSIM ËSHTË

00:00:20.388 --> 00:00:23.210 position:50% align:center size:100% line:80%
SE ÇKA TË BËJMË ME KOHËN 
QË NA ËSHTË DHËNË

00:00:26.188 --> 00:00:28.000 position:50% align:center size:100% line:80%
KA FORCA TJERA QË PUNOJNË
NË KËTË BOTË, O FRODO!

00:00:28.232 --> 00:00:30.000 position:50% align:center size:100% line:80%
PËRPOS VULLNETIT TË LIGËSISË

CSS

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');

.mbajtesi-me-demonstrim {
background-color: #000000;
}

.mbajtesi-me-video {
margin: 0 auto;
max-width: 440px;
} 

video {
width: 100%;
}

video::cue {
font-family: "Oswald", sans-serif;
font-size: 1rem;
background-color: transparent;
color: rgba(255, 255, 255, 0.6);
}