Kif jaħdmu l-elementi tal-awdjo u tal-vidjo?

Question

Accepted Answer

`<audio>` u `<video>` jiddaħħlu l-midja b'mod natinn, b'kontrolli mibniha u API JavaScript — l-ebda plugins meħtieġa.

```html
<video
  controls                    
  width="640"
  poster="thumbnail.jpg"      
  preload="metadata"          
>
  <source src="video.webm" type="video/webm" /> 
  <source src="video.mp4" type="video/mp4" />   
  <track kind="captions" src="caps.vtt" srclang="en" label="English" /> 
  Your browser does not support video.          
</video>
```

## Attributi Ewlenin

- **`controls`** — mingħajr dik, l-ebda UI jidher (kontroll permezz ta' JS).
- **multipl `<source>`** — il-browser juża l-ewwel format li jappoġġa (WebM/MP4 għall-cross-browser).
- **`poster`** — stampa tal-placeholder qabel il-play.
- **`preload`** — `none` / `metadata` / `auto`; uża `metadata` biex tevita li tniżżel fajls kbir sal-meta huma meħtieġa.
- **`autoplay muted loop`** — għal vidjos tal-isfond (il-biċċa l-kbira tal-browsers **jirrikjedu `muted`** biex jippermetti l-autoplay).
- **`<track>`** — sottotitli għall-aċċessibbiltà (fajl `.vtt`).

## Kontroll b'JavaScript

```js
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>` jaħdem bl-istess mod, imma mingħajr il-qafas viżwali/placeholder.

## Għaliex Hija Importanti

L-elementi tal-midja nattivi jipprovdu playback cross-browser, aċċessibbiltà (sottotitli permezz ta' `<track>`), u API JS kompleta għall-players customizzati.

L-għarfien tal-patruni tal-format-fallback, ir-regola `muted`-għall-autoplay, u `preload` għall-prestazzjoni jigħottu l-essenzjali prattiki tal-imdaħħla tal-midja.