← Back to HTML Course | Chapter 6: Canvas, SVG & Media | Lesson 6 of 6

HTML Plug-ins

कल्पना कीजिए कि आप एक स्टैंडर्ड स्मार्टफोन खरीदते हैं। इसमें कॉल करने, टेक्स्ट भेजने, और वेब ब्राउज़ करने के लिए built-in फीचर्स आते हैं। लेकिन, अगर आप कोई बेहद जटिल 3D गेम खेलना चाहते हैं या कोई खास specialized editor इस्तेमाल करना चाहते हैं, तो आपको app store से एक हेल्पर एप्लीकेशन डाउनलोड करना होगा। HTML plug-ins वही हेल्पर एप्लीकेशन्स हैं। वेब के शुरुआती दिनों में, ब्राउज़र्स बेसिक थे और जटिल एप्लीकेशन्स नहीं चला सकते थे। डेवलपर्स गेम्स, इंटरैक्टिव मैप्स, या PDF व्यूअर्स को नेटिवली चलाने के लिए plug-ins (जैसे Flash Player या Java) इस्तेमाल करते थे। आज, मॉडर्न ब्राउज़र्स इनमें से लगभग सभी टास्क नेटिवली हैंडल कर सकते हैं, लेकिन एक्सटर्नल एप्लीकेशन्स को embed करना समझना अभी भी ज़रूरी है।
Syntax
markup
<object data="file-url" type="mime/type" width="width" height="height"></object>
<embed src="file-url" type="mime/type">

Plug-ins का विकास

वेब के शुरुआती दिनों में, ब्राउज़र को media चलाने, games चलाने, या PDFs दिखाने के लिए third-party plug-ins की ज़रूरत होती थी। मॉडर्न वेब स्टैण्डर्ड्स ने इन असुरक्षित plug-ins की जगह native HTML5 टैग्स ले ली हैं, जिससे पेज तेज़ी से लोड होते हैं और ज़्यादा सुरक्षित रूप से चलते हैं।

Note: स्टैण्डर्ड video या audio फाइलें चलाने के लिए object या embed जैसे legacy, plugin-आधारित टैग्स के इस्तेमाल से बचें।
Warning: सिक्योरिटी रिस्क्स की वजह से मॉडर्न ब्राउज़र्स ने Flash Player जैसे legacy plug-ins के लिए सपोर्ट पूरी तरह डिसेबल कर दिया है।

उदाहरण: The Evolution of Plug-ins

markup
<video src="movie.mp4" controls></video>

object से Resources Embed करना

object टैग एक बहुमुखी एलिमेंट है जिसका उपयोग बाहरी resources (जैसे PDFs, इंटरैक्टिव widgets, या दूसरे वेबपेज डॉक्यूमेंट) को सीधे आपके वेबपेज पर embed करने के लिए किया जाता है, साथ ही इसमें width, height, और type attributes भी होते हैं।

Note:
  • resource को रेंडर न कर पाने वाले डिवाइसेज़ पर यूज़र की मदद के लिए हमेशा अपने object टैग्स के अंदर fallback टेक्स्ट शामिल करें।
  • Accepted attributes:
  • data — URL of the resource
  • type — MIME type
  • width / height — pixels
  • name — for targeting
  • form — id of an associated form
Warning: सुनिश्चित करें कि आपके external resources HTTPS प्रोटोकॉल्स इस्तेमाल करके सुरक्षित रूप से होस्ट किए गए हों, क्योंकि ब्राउज़र्स insecure content को ब्लॉक कर देंगे।

उदाहरण: Embedding Resources with object

markup
<object data="document.pdf" type="application/pdf" width="600" height="400">
  Your browser cannot display this PDF.
</object>

embed से सिंपल Embeds

embed टैग एक और self-closing एलिमेंट है जिसका उपयोग बाहरी resources या इंटरैक्टिव टूल्स को इंटीग्रेट करने के लिए किया जाता है। object टैग के उलट, यह ज़्यादा सिंपल है और fallback कंटेंट को नहीं लपेटता, यह resource को लोड और साइज़ करने के लिए पूरी तरह attributes पर निर्भर रहता है।

Note:
  • बाहरी टूल्स या widgets को तेज़ी से, आसानी से इंटीग्रेट करने के लिए embed टैग का उपयोग करें।
  • Accepted attributes:
  • src — URL of the resource
  • type — MIME type
  • width / height — pixels
Warning: क्योंकि embed टैग fallback content सपोर्ट नहीं करता, अगर resource लोड होने में फेल हो जाए तो यह एक खाली ब्लॉक दिखा सकता है।

उदाहरण: Simple Embeds with embed

markup
<embed src="document.pdf" type="application/pdf" width="600" height="400">

Plug-ins के सुरक्षा जोखिम

बाहरी एप्लिकेशन को embed करना जोखिम भरा हो सकता है, क्योंकि वे आपके पेज पर अनचाही स्क्रिप्ट चला सकते हैं। मॉडर्न ब्राउज़र ने legacy plug-ins की जगह यूज़र सुरक्षा की रक्षा के लिए secure APIs और native sandboxed एलिमेंट्स ले ली हैं।

Note: सिर्फ उन्हीं verified, सुरक्षित स्रोतों से बाहरी एप्लिकेशन embed करें, जिन पर आपको पूरा भरोसा हो।
Warning: एक सुरक्षित HTTPS वेबसाइट पर कभी भी insecure HTTP resources embed न करें, क्योंकि ब्राउज़र्स उन्हें सिक्योरिटी कारणों से ब्लॉक कर देंगे।

उदाहरण: Security Risks of Plug-ins

markup
<object data="https://secure.example.com/widget" type="text/html"></object>

मॉडर्न स्टैण्डर्ड विकल्प

मॉडर्न वेब स्टैण्डर्ड्स ने ऐसे native APIs और एलिमेंट्स पेश किए हैं जो पहले plug-ins द्वारा संभाले जाने वाले लगभग सभी काम कर सकते हैं। media playback के लिए video और audio, इंटरैक्टिव ग्राफिक्स के लिए canvas, और बाहरी वेबपेज embed करने के लिए iframes का उपयोग करें।

Note: साइट परफॉर्मेंस और सुरक्षा बेहतर बनाने के लिए अपने legacy वेब प्रोजेक्ट्स को मॉडर्न HTML5 स्टैण्डर्ड्स में अपग्रेड करें।
Warning: legacy plug-ins पर निर्भर रहने से आपकी वेबसाइट मॉडर्न डिवाइसेज़ पर धीमी, असुरक्षित, और बेकार बन सकती है।

उदाहरण: Modern Standard Alternatives

markup
<video src="movie.mp4" controls></video>
<canvas id="graphics"></canvas>
<iframe src="https://example.com"></iframe>
Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.