Как работают элементы audio и video?

Question

Accepted Answer

`<audio>` и `<video>` встраивают медиа нативно, с встроенными элементами управления и JavaScript API — не требуются плагины.

```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`** — без этого интерфейс не отображается (управление через JS).
- **несколько `<source>`** — браузер использует первый поддерживаемый формат (WebM/MP4 для кроссбраузерной совместимости).
- **`poster`** — изображение-заполнитель перед воспроизведением.
- **`preload`** — `none` / `metadata` / `auto`; используйте `metadata`, чтобы избежать загрузки больших файлов до необходимости.
- **`autoplay muted loop`** — для фоновых видео (большинство браузеров **требуют `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>` работает идентично, только без визуального кадра/постера.

## Почему это важно

Нативные элементы медиа обеспечивают кроссбраузерное воспроизведение, доступность (субтитры через `<track>`), и полный JavaScript API для пользовательских плееров.

Знание паттерна резервных форматов, правила `muted` для автозапуска и `preload` для производительности охватывает практические основы встраивания медиа.