Theory
एक promo clip जो कुछ नहीं चलाता
आपके पास एक 20 second का FestConnect promo video है। आप इसे <video src="promo.mp4"></video> से डालते हैं, refresh करते हैं, और एक खाली rectangle दिखता है। File ठीक है, path सही है, पर कोई play button नहीं, कुछ भी नहीं।
HTML5 बिना किसी plugin के video और audio play कर सकता है, पर player सिर्फ़ तभी दिखता है जब आप इसे माँगें। जो tag clip रखता है और जो attribute controls दिखाता है वे दो अलग decisions हैं।
Theory
एक TV जिसका remote ले लिया गया
बिना controls वाला <video> दीवार पर बोल्ट किया एक बंद TV है: picture वहाँ है, पर visitor के पास दबाने को कोई buttons नहीं। controls जोड़ना उन्हें remote थमाता है: play, pause, seek, volume। ज़्यादातर pages के लिए आप remote visible चाहते हैं, तो controls वह attribute है जिसे आप सबसे पहले पकड़ते हैं।
Theory
दो tags और इनके key attributes
- `<video>` और `<audio>` एक clip natively embed करते हैं।
- controls: play/pause/volume bar दिखाता है। आमतौर पर essential।
- src या nested `<source>` tags: file(s)। कई
<source>children browser को एक ऐसा format चुनने देते हैं जो वह support करता है। - autoplay, loop, muted: load पर शुरू, दोहराना, silent शुरू।
- poster (सिर्फ़ video): play से पहले दिखने वाली एक preview image।
Opening और closing tags के बीच रखा text एक fallback message है उन browsers के लिए जो इसे play नहीं कर सकते।
Practical
FestConnect promo video और audio
<video controls width="600" poster="images/promo-cover.jpg">
<source src="media/promo.mp4" type="video/mp4">
<source src="media/promo.webm" type="video/webm">
Your browser cannot play this video.
</video>
<audio controls>
<source src="media/announcement.mp3" type="audio/mpeg">
Your browser cannot play this audio.
</audio>
<!-- To autostart, browsers require it be silent: -->
<!-- <video autoplay muted loop> ... </video> -->This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
दो <source> tags क्यों?
Video promo.mp4 और promo.webm दोनों offer करता है। एक ही clip के लिए एक की जगह दो files क्यों list करें? Browser इनके साथ क्या करता है? पहले सोचिए।
Show the answer
अलग-अलग browsers अलग-अलग video formats support करते हैं। कई <source> tags list करना हर browser को list ऊपर से नीचे तक चलने देता है और पहला format जो यह समझता है play करने देता है, बाकी को ignore करते हुए। mp4 (H.264) सबसे safe अकेला choice है, पर webm जोड़ना उन browsers को cover करता है जो इसे prefer करते हैं। सिर्फ़ एक file कभी download और play होती है; बाकी सिर्फ़ alternatives हैं।
Quiz
आप promo के लिए `<video autoplay>` जोड़ते हैं, पर ज़्यादातर phones पर यह automatically शुरू होने से इनकार करता है। Browsers actually कौन सा fix require करते हैं?
- muted attribute जोड़िए: browsers sound वाला autoplay block करते हैं
- controls हटाइए ताकि autoplay ले ले
- File को mp4 से mp3 में बदल दीजिए
- loop जोड़िए, जो autoplay शुरू होने पर मजबूर करता है
Show the answer
muted attribute जोड़िए: browsers sound वाला autoplay block करते हैं
Modern browsers sound वाला autoplay block करते हैं, ताकि pages आपके ऊपर न चिल्लाएँ; एक muted video को autostart की permission है, तो autoplay muted काम करने वाला combination है (A)। controls हटाना (B) autoplay की permission नहीं देता। mp3 (C) एक audio format है, video के लिए ग़लत और block से unrelated। loop (D) सिर्फ़ clip दोहराता है, यह एक start मजबूर नहीं कर सकता।
Watch out
Media traps
- Invisible player: बिना
controlsऔर बिना autoplay के user को दबाने को कुछ नहीं दिखता। अगर एक question सिर्फ़srcवाला<video>दिखाता है और पूछता है 'user क्या देखता है?', answer एक बिना buttons वाला frame है।
- Autoplay को muted चाहिए: कभी दावा मत कीजिए
autoplayअकेले load पर sound play करता है।
- Media के लिए ग़लत tag: sound के लिए
<audio>, चलती picture के लिए<video>। और fallback text tags के बीच डालिए, किसी attribute में नहीं।
Theory
Raw tag से styled card तक
यह native player functional है पर plain है। Unit 2 में, Bootstrap के media object और card components एक video या thumbnail को एक साफ़ layout में एक title और text के साथ बगल में wrap कर देते हैं, बिल्कुल वही जो एक FestConnect event card चाहता है। <video>/<audio> tag same रहता है; Bootstrap सिर्फ़ इसके आस-पास के box को style करता है।
Summary
Key takeaways
- <video> और <audio> clips को natively embed करते हैं, किसी plugin की ज़रूरत नहीं।
- play/pause bar दिखाने के लिए controls जोड़िए; इसके बिना (और autoplay के बिना) कुछ भी visible नहीं होता।
- कई <source> children कई formats offer करते हैं; browser पहला वाला play करता है जो यह support करता है (mp4 safe video default है, mp3 audio के लिए)।
- autoplay sound के साथ blocked है: autostart के लिए इसे muted के साथ pair कीजिए।
- Tags के बीच text उन browsers के लिए fallback है जो file play नहीं कर सकते; poster एक video preview image set करता है।
- Memory hook: कोई controls नहीं, कोई remote नहीं।