Comment fonctionnent les éléments audio et vidéo ?

Question

Accepted Answer

`<audio>` et `<video>` intègrent les médias nativement, avec des contrôles intégrés et une API JavaScript — aucun plugin nécessaire.

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

## Attributs clés

- **`controls`** — sans cela, aucune interface n'apparaît (vous contrôleriez via JS).
- **plusieurs `<source>`** — le navigateur utilise le premier format qu'il supporte (WebM/MP4 pour la compatibilité multi-navigateurs).
- **`poster`** — image d'attente avant la lecture.
- **`preload`** — `none` / `metadata` / `auto` ; utilisez `metadata` pour éviter de télécharger les gros fichiers jusqu'à ce qu'ils soient nécessaires.
- **`autoplay muted loop`** — pour les vidéos d'arrière-plan (la plupart des navigateurs **exigent `muted`** pour permettre l'autoplay).
- **`<track>`** — sous-titres/captions pour l'accessibilité (un fichier `.vtt`).

## Contrôle avec 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>` fonctionne de manière identique, juste sans le cadre visuel/poster.

## Pourquoi c'est important

Les éléments médias natifs vous offrent une lecture multi-navigateurs, l'accessibilité (sous-titres via `<track>`), et une API JS complète pour les lecteurs personnalisés.

Connaître le modèle de format de secours, la règle `muted`-pour-autoplay, et `preload` pour les performances couvre les points essentiels pratiques de l'intégration de médias.