Theory
अपनी Portfolio में जान डालना
आपने lists, tables, और एक contact form के साथ एक साफ़ portfolio website बनाई है। यह आपका resume ख़ूबसूरती से दिखाती है। पर क्या हो अगर आप अपने semester project का एक recorded screen capture video action में दिखाना चाहते हैं? या क्या हो अगर आप एक recruiter का स्वागत करता एक voice introduction चलाना चाहते हैं? अगर आप बस साधारण text links type करते हैं, user को उन्हें देखने या सुनने के लिए आपकी site छोड़नी होगी। हम rich audio और video को सीधे आपके layout में कैसे embed करें ताकि वे live चलें?
Theory
Television Set और Wall Poster
regular text और images को wall पर posters की तरह सोचिए: वे static हैं और कभी नहीं बदलते। Media elements जोड़ना उस wall में एक छेद काटने और एक interactive television screen लगाने जैसा है। यह screen बस एक स्थिर picture नहीं दिखाती, यह एक built-in playback deck, volume sliders, play buttons, और internal components के साथ आती है जो सीधे एक storage folder से video frames या audio tracks लाते हैं, सब कुछ आपके static poster frame के ठीक अंदर चलते हुए।
Theory
HTML5 Multimedia Architecture
आधुनिक web engineering में, multimedia elements external browser plugins बिना audio और video files का native playback करने देते हैं। <video> tag चलती visual media embed करता है, जबकि <audio> tag sound clips embed करता है। दोनों elements container tags हैं जो control attributes स्वीकार करते हैं और वैकल्पिक source options लपेटते हैं। external स्वतंत्र assets या legacy formats embed करने के लिए, HTML लचीला <embed> tag और YouTube जैसी web services के लिए standard <iframe> wrappers देता है।
At a glance
multimedia playback और embedding के लिए इस्तेमाल मुख्य HTML elements।
| Tag Name | Primary Attributes | Best Use Case |
|---|---|---|
| <video> | src, controls, autoplay, loop, width | local video clips या project screencasts चलाना। |
| <audio> | src, controls, loop, preload | voice notes, background music, या audio greetings चलाना। |
| <embed> | src, type, width, height | PDF documents जैसे external resource types एकीकृत करना। |
| <iframe> | src, width, height, allowfullscreen | YouTube जैसे third party platforms पर hosted videos streaming करना। |
Practical
एक Local Project Video और एक YouTube Feed Embed करना
<body>
<h2>Project Demo Reel</h2>
<video width="400" controls>
<source src="project-demo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<h2>Featured Presentation</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/example" allowfullscreen></iframe>
</body>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Quiz
आप अपने portfolio page में एक <audio src="intro.mp3"> tag जोड़ते हैं। जब आप browser में webpage खोलते हैं, audio player पूरी तरह अदृश्य है और कोई sound नहीं चलती। सबसे संभावित वजह क्या है?
- audio tag को screen पर visible होने के लिए एक iframe wrapper चाहिए
- आप audio tag के अंदर controls attribute शामिल करना भूल गए
- Audio files केवल तभी चल सकती हैं अगर head element के अंदर declare की जाएँ
- mp3 format standard HTML5 engines द्वारा natively support नहीं होता
Show the answer
आप audio tag के अंदर controls attribute शामिल करना भूल गए
default रूप से, <video> और <audio> दोनों elements छिपे हैं या पूरी तरह interface की कमी रखते हैं जब तक आप स्पष्ट रूप से controls attribute शामिल न करें। इसके बिना, player शून्य width और height के साथ render होता है, user को playback trigger करने के लिए कोई buttons बिना छोड़ते हुए।
Think first
Streaming Embeds बनाम Local Video Tags का मूल्यांकन
कल्पना कीजिए आपका final year project video एक विशाल 2 gigabyte file है। क्या आपको यह file सीधे अपने local hosting server पर <video> tag इस्तेमाल करके host करनी चाहिए, या इसे YouTube पर upload करके एक <iframe> embed इस्तेमाल करना चाहिए? tap करने से पहले server load और network limits के बारे में सोचिए।
Show the answer
आपको इसे YouTube पर upload करना चाहिए और एक <iframe> embed इस्तेमाल करना चाहिए। विशाल media files आपकी personal web hosting bandwidth तेज़ी से खपाती हैं, आपके visitors के लिए धीमे loading times पैदा करते हुए। YouTube अपने-आप video file compress करता है और भारी streaming bandwidth सँभालता है, आपकी मुख्य portfolio site को lightweight और तेज़ रखते हुए।
Watch out
ख़ाली Player का गड्ढा
university practical exams में एक classic ग़लती <video src="demo.mp4"> बिना किसी child tags या fallback descriptions के लिखना है। अगर एक visitor का browser उस ख़ास video container format decode करने में विफल होता है, media area एक पूरी तरह टूटा blank block render करता है। अधिकतम marks पक्के करने के लिए, हमेशा alternate formats देने के लिए nested <source> tag architecture इस्तेमाल कीजिए, पुराने browsers के लिए एक plain text backup message के बाद।
Formula
Exam Answer Recipe: Multimedia Integration
जब एक theory question आपसे HTML5 media handling समझाने को कहे, पूर्ण marks के लिए अपना जवाब इन steps से structure कीजिए:
- 1. Differentiate:
<video>या<audio>इस्तेमाल करते native streaming बनाम<iframe>इस्तेमाल करती platform embedding समझाइए। - 2. Control attributes:
controls,width,height, औरautoplayसमेत मुख्य control parameters स्पष्ट रूप से निर्दिष्ट कीजिए। - 3. Fallback logic: पुराने browsers को शालीनता से सँभालने के लिए tag container के अंदर एक plain text warning message के साथ एक nested
<source>mechanism दीजिए।
Summary
Key takeaways
<video>tag native video streams सँभालता है और screen shifting रोकने के लिए layout dimension bounds माँगता है।<audio>tag भारी third party plug-ins की ज़रूरत बिना native sound playback controls पेश करता है।- web users को play, pause, volume, और tracking behaviors उजागर करने के लिए controls attribute अनिवार्य है।
- embed और iframe elements आपको external resources और YouTube जैसी third party streaming services जोड़ने देते हैं।
- Nested source child tags आपको अधिकतम across-browser सुरक्षा के लिए कई media formats declare करने देते हैं।
- Memory Hook: Controls deck दिखाते हैं, source track सँभालता है, frames बाहर से बिना पीछे देखे embed करते हैं।