ऑडियो और वीडियो
आज हम पेज पर media देखते हैं — video tag, फ़ाइल का src path, और controls attribute जिससे visitor play और pause कर सके।
- 1
पेज पर media क्या होता है
पिछले लेसन में
<img>से स्थिर तस्वीर दिखाई। आज चलता क्लिप चलाते हैं। आवाज़ और video भी फ़ाइलें हैं जिन्हें browser लाता है। HTML को ऐसा tag चाहिए जो फ़ाइल की ओर इशारा करे और play controls दे।आज
<video>से अभ्यास।<audio>भी वही idea है — source फ़ाइल और controls — बिना picture frame के। आज एक उदाहरण काफ़ी है। - 2
पहले एक समस्या थी
लंबे समय तक पेज पर क्लिप चलाने के लिए plugins चाहिए होते थे। लोग सरल HTML संकेत चाहते थे: फ़ाइल यहाँ है, visitor play दबाए। Browsers ने built-in media tags जोड़े ताकि पेज खुद sound और video ले सके।
<video>images की तरहsrcसे फ़ाइल का path लेता है।controlsattribute browser से play bar दिखाने को कहता है। इसके बिना क्लिप लोड हो सकती है, पर visitor के पास बटन नहीं होते। - 3
Browser video को कैसे इस्तेमाल करता है
Browser opening
<video>पढ़ता है,srcसे फ़ाइल लाता है, औरcontrolsहोने पर player दिखाता है।<img>के उलट<video>का closing tag होता है। पुराने browsers के लिए टैगों के बीच fallback टेक्स्ट रख सकते हो; उदाहरण साफ़ रखने को खाली छोड़ते हैं।नीचे उदाहरण में
srcपूरा URL है, जोhttps://से शुरू होता है। गलत path या unsupported format पर player खाली रह सकता है। - 4
आज हम यही पढ़ने वाले हैं
नीचे छोटा
<video>ब्लॉक पढ़ो, फिर browser pane में play बटन दबाओ। - 5
शुरुआत में controls ज़रूरी है
Opening tag पर
srcऔरcontrolsलगाओ, फिर</video>से बंद करो। बाद में autoplay नियम और कई<source>फ़ाइलें सीख सकते हो। आज controls वाली एक क्लिप पूरा लेसन है।
आप क्या सीखेंगे
- 1Media फ़ाइलों के लिए खास HTML tag चाहिए
- 2video क्लिप को player के साथ दिखाता है
- 3src media फ़ाइल की ओर इशारा करता है
- 4controls play और pause दिखाता है
- 5audio वही तरीका है, बिना तस्वीर के
लाइन-बाय-लाइन
<video>Video player का opening tag।
<img>के उलट इसका closing tag भी चाहिए।src="https://...flower.mp4"Media फ़ाइल कहाँ है। यहाँ पूरा URL है। साइट का path जैसे
/videos/clip.mp4भी उसी तरह काम करता है।controlsBoolean attribute। मौजूद होना ही browser से play bar माँगता है। Value की ज़रूरत नहीं।
</video>Closing tag। इस video player की सारी बात opening और इसके बीच रहती है।
<audio src="..." controls></audio>Audio player एलिमेंट। यह
srcसे ऑडियो फ़ाइल (जैसे MP3 या OGG) लेता है और play, pause व volume बटन के साथ आवाज़ सुनाने वाला प्लेयर बनाता है।
खुद ट्राई करो
ऊपर दिए गए लाइव एडिटर में audio player के ठीक ऊपर <p>गाना शुरू होने वाला है...</p> लिखकर देखो और सामने तुरंत बदलाव देखो!
हिंट: Opening tag में src और controls, फिर closing tag। Video और audio दोनों में controls लगाने पर ही प्ले बटन दिखते हैं।
गलती कहाँ होती है
- 1.
controlsभूल जाना। फ़ाइल लोड हो सकती है, पर visitor को play बटन नहीं दिखता। - 2.
<video>या<audio>को<img>जैसा समझकर closing tag छोड़ देना। - 3.गलत फ़ाइल पाथ या unsupported फ़ॉर्मैट देना, जिससे स्क्रीन पर खाली बॉक्स रह जाता है।
इंटरव्यू की तैयारी (क्लिक करके उत्तर देखें)
Q: controls attribute क्या करता है?▼
Browser से media element के लिए default play, pause, seek bar और volume UI दिखाने को कहता है। इसके बिना विज़िटर मीडिया को प्ले नहीं कर पाएगा।
Q: video और img में क्या फ़र्क है?▼
<img> स्थिर तस्वीर का void/self-closing tag है। <video> का closing tag होता है (</video>) और यह controls के साथ मूविंग क्लिप चलाता है।
Q: क्या एक वीडियो में कई formats दे सकते हैं?▼
हाँ! <video> के अंदर <source src="video.mp4" type="video/mp4"> और <source src="video.webm" type="video/webm"> लगा सकते हैं ताकि ब्राउज़र अपनी पसंद का सही फ़ॉर्मैट चुन सके।