HTML ऑडियो/वीडियो रेफरेंस

फ़र्ज़ करें आप किसी online video editor पर जाते हैं, लेकिन play, pause, या volume controls दिखने की बजाय, media player बस एक खाली, unclickable grey box है। किसी पाँच-second clip को देखने के लिए भी आपको file download करके एक अलग program खोलना पड़ेगा। Modern HTML5 इस समस्या को solve करता है। यह native, built-in audio और video reference elements देता है, जिससे आप media files को सीधे अपने page पर embed कर सकते हैं। यह reference guide सभी standard attributes (जैसे autoplay, controls, loop, और muted) की सूची देती है ताकि आप responsive, high-performance media players बना सकें।

In this page:

स्टैंडर्ड ऑडियो और वीडियो एलिमेंट्स
प्लेबैक कंट्रोल एट्रिब्यूट्स
preload से ऑप्टिमाइज़ करना
track से सबटाइटल्स जोड़ना
मीडिया सोर्स फॉलबैक कॉन्फ़िगरेशन

स्टैंडर्ड ऑडियो और वीडियो एलिमेंट्स

HTML5 ने असुरक्षित, third-party plug-ins को बदलने के लिए native audio और video elements पेश किए, जिससे आप media files सीधे अपने webpage पर embed कर सकते हैं।

Note:

यह सुनिश्चित करने के लिए कि आपकी videos हर device पर चलें, MP4 और WebM दोनों formats दें।
Accepted attributes:
src — media file URL
controls / autoplay / loop / muted — booleans
preload — none | metadata | auto
width / height / poster / playsinline — video only

Warning: legacy devices पर जो users player render नहीं कर पाते उनकी मदद के लिए अपने media tags के अंदर हमेशा fallback text लिखें।

उदाहरण: Standard Audio & Video Elements

markup

<video src="movie.mp4" controls></video>
<audio src="song.mp3" controls></audio>

प्लेबैक कंट्रोल एट्रिब्यूट्स

आप built-in attributes इस्तेमाल करके यह customize कर सकते हैं कि आपके media players कैसे बर्ताव करें: controls playback buttons दिखाता है, autoplay playback अपने आप शुरू करता है, loop file को दोहराता है, और muted audio को silent कर देता है।

Note:

हमेशा controls attribute शामिल करें ताकि आपके users media को pause और play कर सकें।
Accepted attributes:
controls — boolean
autoplay — boolean
loop — boolean
muted — boolean
playsinline — boolean (video)
poster — image URL (video)

Warning: जब तक आप muted attribute भी शामिल न करें, browsers media files के auto-play को block कर देंगे।

उदाहरण: Playback Control Attributes

markup

<video src="movie.mp4" controls autoplay loop muted></video>

preload से ऑप्टिमाइज़ करना

preload attribute browser को बताता है कि page लोड होने पर media file का कितना हिस्सा background में download करना है, जिससे आप none, metadata, या auto settings में से चुन सकते हैं।

Note:

कई media players वाले pages पर अपनी site को तेज़ी से लोड रखने के लिए preload="none" इस्तेमाल करें।
Accepted values:
none
metadata
auto

Warning: preload="auto" का ज़्यादा इस्तेमाल काफी server bandwidth बर्बाद कर सकता है और mobile users के लिए page loads धीमे कर सकता है।

उदाहरण: Optimizing with preload

markup

<audio src="song.mp3" controls preload="metadata"></audio>

track से सबटाइटल्स जोड़ना

track element आपकी videos में timed text subtitles या captions जोड़ने के लिए इस्तेमाल होता है, जो एक standard WebVTT (.vtt) file को reference करके आपकी video के ऊपर synchronised text दिखाता है।

Note:

subtitles को अपने आप दिखाने के लिए अपने track tag पर default attribute सेट करें।
Accepted attributes:
kind — subtitles | captions | descriptions | chapters | metadata
src — .vtt URL
srclang — language code
label — menu text
default — boolean

Warning: सही caption synchronization सुनिश्चित करने के लिए पक्का करें कि आपकी WebVTT caption file सुरक्षित तरीके से hosted हो और syntax errors से मुक्त हो।

उदाहरण: Adding Subtitles with track

markup

<video src="movie.mp4" controls>
  <track src="captions.vtt" kind="subtitles" srclang="en" default>
</video>

मीडिया सोर्स फॉलबैक कॉन्फ़िगरेशन

यह सुनिश्चित करने के लिए कि आपका media हर device पर चले, आप अपने media tags के अंदर कई source elements दे सकते हैं, जिससे browser अपने compatible पहले format को चुनकर चला सके।

Note:

videos के लिए MP4 और WebM दोनों formats दें, और audio files के लिए MP3 और OGG दोनों formats दें।
Accepted attributes:
source src — file URL
source type — MIME type such as video/mp4 | video/webm | audio/mpeg
source media — media query (optional)

Warning: बड़े, unoptimized raw file formats (जैसे AVI या WAV) इस्तेमाल करने से bandwidth बर्बाद हो सकता है और आपकी site की load speed धीमी हो सकती है।

उदाहरण: Media Source Fallback Configurations

markup

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
</video>

Live Example

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Doctypes Next Lesson → HTML Meta Tags

HTML ऑडियो/वीडियो रेफरेंस

स्टैंडर्ड ऑडियो और वीडियो एलिमेंट्स

प्लेबैक कंट्रोल एट्रिब्यूट्स

preload से ऑप्टिमाइज़ करना

track से सबटाइटल्स जोड़ना

मीडिया सोर्स फॉलबैक कॉन्फ़िगरेशन

Chapter Quiz — Complete all 20 topics to unlock

Login to run this code