Πώς λειτουργούν τα στοιχεία audio και video;

Question

Accepted Answer

Τα `<audio>` και `<video>` ενσωματώνουν media εγγενώς, με ενσωματωμένα στοιχεία ελέγχου και ένα JavaScript API — χωρίς ανάγκη plugins.

```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>
```

## Κύρια χαρακτηριστικά

- **`controls`** — χωρίς αυτό, δεν εμφανίζεται κανένα UI (θα ελέγχατε μέσω JS).
- **πολλαπλά `<source>`** — το πρόγραμμα περιήγησης χρησιμοποιεί τη πρώτη μορφή που υποστηρίζει (WebM/MP4 για συμβατότητα ανά πρόγραμμα περιήγησης).
- **`poster`** — εικόνα θέσης κράτησης πριν την αναπαραγωγή.
- **`preload`** — `none` / `metadata` / `auto`; χρησιμοποιήστε `metadata` για να αποφύγετε τη λήψη μεγάλων αρχείων έως ότου χρειαστούν.
- **`autoplay muted loop`** — για videos φόντου (τα περισσότερα προγράμματα περιήγησης **απαιτούν `muted`** για να επιτρέψουν αυτόματη αναπαραγωγή).
- **`<track>`** — λεζάντες/υπότιτλοι για προσβασιμότητα (ένα αρχείο `.vtt`).

## Έλεγχος με 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>` λειτουργεί πανομοιότυπα, απλώς χωρίς το οπτικό πλαίσιο/poster.

## Γιατί έχει σημασία

Τα εγγενή στοιχεία media σας δίνουν αναπαραγωγή συμβατή με πολλά προγράμματα περιήγησης, προσβασιμότητα (λεζάντες μέσω `<track>`) και ένα πλήρες API JavaScript για προσαρμοσμένα player.

Η γνώση του σχεδίου fallback μορφής, του κανόνα `muted`-για-autoplay και του `preload` για απόδοση καλύπτει τα πρακτικά απαραίτητα στοιχεία της ενσωμάτωσης media.