HTML मीडिया

इमेज मैप ने एक ही तस्वीर के क्षेत्रों को क्लिक करने योग्य बनाया। वेब पर मीडिया इससे व्यापक है: स्थिर चित्र, ध्वनि, चलती तस्वीरें, और कभी-कभी नेस्टेड पेज या होस्टेड प्लेयर। HTML उद्देश्य-विशेष टैग देता है ताकि ब्राउज़र उन संसाधनों को नियंत्रण और पहुँच-योग्यता हुक के साथ दिखा या चला सकें। यह सेशन Video, Audio, YouTube और Plug-ins के गहराई में जाने से पहले आपका नक्शा है।

यहाँ «मीडिया» का अर्थ

कोर्स की रोज़मर्रा की भाषा में, मीडिया वह सामग्री है जो केवल पैराग्राफ़ और शीर्षक नहीं है — फ़ोटो, आइकन, वॉइस क्लिप, डेमो और एम्बेड। सही एलिमेंट ब्राउज़र को नेटिव प्ले UI दिखाने, सही संसाधन प्रकार डाउनलोड करने, और सहायक तकनीक को रहस्यमय स्क्रिप्ट-भरे <div> से बेहतर भूमिका देने में मदद करता है।

सीधा उत्तर

• चित्र → img (और कभी-कभी कई फ़ाइलों के लिए picture)
• ध्वनि → audio
• फ़िल्म और क्लिप → video
• नेस्टेड ब्राउज़िंग (मैप, अन्य साइटों के प्लेयर) → अक्सर iframe
  काम के लिए मेल खाता एलिमेंट चुनें। audio और video पर उपयोगकर्ताओं को controls दें, जब तक आपके पास मजबूत, पहुँच-योग्य कस्टम प्लेयर न हो। जब मीडिया महत्वपूर्ण जानकारी ले जाता है, टेक्स्ट विकल्प, कैप्शन या ट्रांसक्रिप्ट की योजना बनाएँ।

एक नज़र में निर्माण ब्लॉक

एक छोटा सैंपल

आप पहले से img जानते हैं। यहाँ audio और video पहली अभ्यास पेज पर उसके साथ कैसे बैठते हैं — पथ उदाहरण हैं; घर पर आज़माते समय वास्तविक फ़ाइलें इस्तेमाल करें।

सैंपल पढ़ना

• img को अभी भी src और अर्थपूर्ण alt चाहिए
• audio और video src इस्तेमाल करते हैं (या बाद के पाठों में नेस्टेड source चाइल्ड) और controls से लाभ मिलता है
• video पर width फ़ाइल लोड होते समय लेआउट स्थान आरक्षित कर सकता है
• खाली फ़ाइलें या गलत पथ अन्य एसेट की तरह ही विफल होते हैं — फ़ोल्डर जल्दी जाँचें

Controls शुरुआती आदत है

controls एट्रिब्यूट ब्राउज़र से प्ले, पॉज़ और संबंधित UI दिखाने को कहता है। स्पष्ट उपयोगकर्ता क्रिया के बिना ध्वनि ऑटोप्ले अक्सर ब्लॉक होता है और आमतौर पर परेशान करने वाला होता है। दृश्य नियंत्रणों से शुरू करें। कस्टम प्लेयर बाद में आते हैं अगर प्रोजेक्ट सच में ज़रूरत हो।

सही उपकरण चुनना

• पॉडकास्ट या वॉइस नोट → audio
• स्क्रीन रिकॉर्डिंग या क्लिप → video
• फ़ोटो या आरेख → img / picture
• मैप विजेट या थर्ड-पार्टी प्लेयर पेज → अक्सर iframe (प्रदर्शन और सुरक्षा की जागरूकता के साथ)
  वीडियो को इमेज टैग में न ठूँसें, या पूरा बाहरी ऐप रहस्यमय स्क्रिप्ट ब्लॉब में, जब नेटिव एलिमेंट मौजूद हो।

पहुँच-योग्यता और अर्थ

अगर मीडिया कुछ सिखाता है, योजना बनाएँ कि जो व्यक्ति सुन या देख नहीं सकता उसे भी विचार मिले: सूचनात्मक चित्रों के लिए alt, बोली गई वीडियो के लिए कैप्शन, लंबे ऑडियो के लिए ट्रांसक्रिप्ट। बिना जानकारी की सजावटी गति फ़ोकस न फँसाए और ज़ोर से ऑटोप्ले न हो। बाद के विशेष पाठ गहराई देंगे; आदत अभी बाँध लें।

iframe की लागत (पूर्वावलोकन)

iframe एक और ब्राउज़िंग संदर्भ एम्बेड करता है। मैप और होस्टेड प्लेयर के लिए यह शक्तिशाली है, और यह दूसरी पेज की स्क्रिप्ट, कुकी और लेआउट वजन भी आपकी पेज में लाता है। तब इस्तेमाल करें जब नेस्टिंग असली लक्ष्य हो — खुद होस्ट की हर मीडिया फ़ाइल के लिए डिफ़ॉल्ट नहीं। अपनी फ़ाइलों के लिए नेटिव audio / video / img सरल रहते हैं।

अगले पाठ कैसे फिट होते हैं

इस नक्शे के बाद: Video और Audio एट्रिब्यूट, कई स्रोत और व्यावहारिक फ़ाइल आदतें सिखाते हैं। Plug-ins और YouTube पुराने या होस्टेड पैटर्न कवर करते हैं। Iframe एम्बेडिंग पर गहरा जाता है। इस पेज को निर्देशिका समझें; उन पेजों को वर्कशॉप।

अपने एडिटर में अभ्यास

1. तालिका से बताएँ कि पॉडकास्ट फ़ाइल के लिए कौन सा एलिमेंट चुनेंगे (audio)।
2. अभ्यास पेज पर स्पष्ट alt वाला एक img जोड़ें (आप पहले से जानते हैं)।
3. अगर छोटा mp3 या mp4 हो, controls के साथ audio या video जोड़ें।
4. नोट्स में एक पंक्ति लिखें: «बोली गई सामग्री के लिए कैप्शन/ट्रांसक्रिप्ट।»
5. अगले मीडिया सेशन के शीर्षक स्किम करें ताकि रोडमैप परिचित लगे।

आसान गलतियाँ

• स्पष्ट उपयोगकर्ता जेस्चर या controls के बिना ध्वनि ऑटोप्ले
• आकार की सोच और वैकल्पिक टेक्स्ट योजना के बिना विशाल वीडियो एम्बेड
• हर फ़ाइल के लिए iframe जब नेटिव audio/video/img काफी हों
• भूलना कि iframe दूसरी पेज की सुरक्षा और प्रदर्शन लागत आयात करते हैं
• इस अवलोकन को «हमेशा के लिए काफी» मानना और वास्तव में मीडिया प्रकाशित करते समय विशेष पाठ छोड़ देना

सारांश

• HTML मीडिया चित्र, ऑडियो, वीडियो और एम्बेड कवर करता है
• काम के लिए मेल खाता एलिमेंट चुनें
• उपयोगकर्ताओं को नियंत्रण दें और जब मीडिया अर्थ रखे तो विकल्पों की योजना बनाएँ
• अपनी फ़ाइलों के लिए नेटिव टैग; iframe जब सच में दूसरी पेज या होस्टेड प्लेयर नेस्ट करें
• अगले पाठ प्रत्येक प्रकार को विशेष बनाते हैं — यह पेज नक्शा है