Ses ve video öğeleri nasıl çalışır?

Question

Accepted Answer

`<audio>` ve `<video>` ortamı yerel olarak gömer, yerleşik denetimler ve JavaScript API'si ile — eklenti gerekmez.

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

## Anahtar öznitelikler

- **`controls`** — olmadan, hiçbir kullanıcı arabirimi görünmez (JS aracılığıyla kontrol edersiniz).
- **çoklu `<source>`** — tarayıcı desteklediği ilk biçimi kullanır (tarayıcılar arası için WebM/MP4).
- **`poster`** — oynatmadan önce yer tutucu görüntü.
- **`preload`** — `none` / `metadata` / `auto`; gerekene kadar büyük dosyaları indirmekten kaçınmak için `metadata` kullanın.
- **`autoplay muted loop`** — arka plan videoları için (çoğu tarayıcı **otomatik oynatmaya izin vermek için `muted` gerektirir**).
- **`<track>`** — erişilebilirlik için başlıklar/altyazılar (bir `.vtt` dosyası).

## JavaScript ile Kontrol Etme

```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>` yalnızca görsel çerçeve/poster olmaksızın aynı şekilde çalışır.

## Neden önemli

Yerel ortam öğeleri, tarayıcılar arası oynatma, erişilebilirlik (`<track>` aracılığıyla altyazılar) ve özel oynatıcılar için tam bir JS API'si sağlar.

Biçim geri dönüş modelini, `muted`-oto-oynatma kuralını ve `preload` performans için bilmek, ortamları gömmek için pratik temelleri kapsar.