آڈیو اور ویڈیو عناصر کیسے کام کرتے ہیں؟

Question

Accepted Answer

`<audio>` اور `<video>` میڈیا کو natively embed کرتے ہیں، built-in controls اور 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>
```

## اہم attributes

- **`controls`** — اس کے بغیر، کوئی UI ظاہر نہیں ہوتی (آپ JS کے ذریعے control کریں گے)۔
- **متعدد `<source>`** — براؤزر پہی format استعمال کرتا ہے جو وہ support کرتا ہے (cross-browser کے لیے WebM/MP4)۔
- **`poster`** — play سے پہلے placeholder image۔
- **`preload`** — `none` / `metadata` / `auto`؛ بڑی files کو ڈاؤن لوڈ کرنے سے بچنے کے لیے `metadata` استعمال کریں جب تک ضرورت نہ ہو۔
- **`autoplay muted loop`** — background videos کے لیے (زیادہ تر browsers کو autoplay کی اجازت دینے کے لیے **`muted`** کی ضرورت ہے)۔
- **`<track>`** — accessibility کے لیے captions/subtitles (ایک `.vtt` file)۔

## 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>` بالکل یکساں طریقے سے کام کرتا ہے، صرف visual frame/poster کے بغیر۔

## یہ کیوں اہم ہے

Native media elements آپ کو cross-browser playback، accessibility (captions via `<track>`)، اور custom players کے لیے مکمل JS API فراہم کرتے ہیں۔

Format-fallback pattern، `muted`-for-autoplay rule، اور `preload` for performance کو جاننا میڈیا embedding کے عملی ضروری باتوں کو cover کرتا ہے۔