अडियो र भिडियो तत्वहरूले कसरी काम गर्छन्?

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`** — यो बिना, कुनै UI देखिंदैन (तपाइँ JS को माध्यमबाट नियन्त्रण गर्नुहुन्छ)।
- **एक भन्दा बढी `<source>`** — ब्राउजरले पहिलो फरम्याट प्रयोग गर्छ जसलाई यो समर्थन गर्छ (WebM/MP4 क्रस-ब्राउजरको लागि)।
- **`poster`** — खेल गर्नु अघि प्लेसहोल्डर छवि।
- **`preload`** — `none` / `metadata` / `auto`; ठूला फाइलहरू डाउनलोड गर्न रोक्न `metadata` प्रयोग गर्नुहोस् जबसम्म आवश्यक छैन।
- **`autoplay muted loop`** — पृष्ठभूमि भिडियोहरूको लागि (अधिकांश ब्राउजरहरूले **`muted` को आवश्यकता गर्छन्** autoplay लाई अनुमति दिन)।
- **`<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>` को माध्यमबाट), र कस्टम खेलाडीहरूको लागि पूर्ण JS API दिन्छन्।

फरम्याट-फलब्याक प्याटर्न, autoplay को लागि `muted` नियम, र प्रदर्शनको लागि `preload` जान्नु मीडिया एम्बेड गर्ने व्यावहारिक आवश्यकताहरूलाई कवर गर्छ।