Si funksionojnë elementet audio dhe video?

<audio> dhe <video> përfshijnë media në mënyrë native, me kontroll të integruar dhe një API JavaScript — nuk janë të nevojshëm asnjë plugin.

<video
  controls                    
  width="640"
  poster="thumbnail.jpg"      
  preload="metadata"          
>
  <source src="video.webm" type="video/webm" /> <!-- preferred format -->
  <source src="video.mp4" type="video/mp4" />   <!-- fallback format -->
  <track kind="captions" src="caps.vtt" srclang="en" label="English" /> <!-- subtitles -->
  Your browser does not support video.          <!-- fallback text -->
</video>

Atributet kryesore

• controls — pa të, nuk shfaqet asnjë ndërfaqe (do ta kontrollonit përmes JS).
• shumë <source> — shfletuesi përdor formatin e parë që suporton (WebM/MP4 për mbështetje të shumë shfletuesve).
• poster — imazh zëvendësuese përpara luajtjes.
• preload — none / metadata / auto; përdorni metadata për të shmangur shkarkimin e skedarëve të mëdhenj derisa të nevojitet.
• autoplay muted loop — për videot në sfond (shumica e shfletuesve kërkojnë muted për të lejuar luajtje të vetvetishme).
• <track> — titrat/nënndimet për aksesibilitet (një skedar .vtt).

Kontrollimi me JavaScript

const v = document.querySelector("video");
v.play();           // returns a promise (may reject if autoplay blocked)
v.pause();
v.currentTime = 30; // seek to 30 seconds
v.volume = 0.5;
v.addEventListener("ended", () => console.log("finished"));

<audio> funksionon në të njëjtën mënyrë, vetëm pa kornizën vizuale/posterin.

Pse është i rëndësishëm

Elementet native të mediave ju japin luajtje të përputhur në shfletues, aksesibilitet (titrat përmes <track>), dhe një API të plotë JS për luajtës të personalizuar.

Dije e modelit fallback të formatit, rregulla muted-për-luajtje-të-vetvetishme, dhe preload për performancën mbulojnë thëniet praktike të përfshirjes media.