HTML Academy · पाठ

कई फ़ॉर्मैट के लिए source एलिमेंट

source एलिमेंट से वैकल्पिक फ़ॉर्मैट उपलब्ध कराएँ

पाठ 3, कुल 4 में से13 चरण

कई फ़ॉर्मैट के लिए source एलिमेंट, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

एक से अधिक प्रारूप क्यों?

अलग-अलग ब्राउज़र अलग-अलग ऑडियो/वीडियो कोडेक का समर्थन करते हैं:

WebM (वीपी9/वीपी8) — Chrome, Firefox, Edge (Safari में नहीं)
एमपी4 (एच.264) — सभी ब्राउज़र (सार्वभौमिक)
OGG — Firefox, Chrome (Safari में नहीं)
OPUS — Chrome, Firefox, Edge (Safari में नहीं)

<source> तत्व आपको वैकल्पिक व्यवस्था के लिए कई प्रारूप उपलब्ध कराने देता है।

ऑडियो के अंदर स्रोत

ऑडियो के कई प्रारूप उपलब्ध कराएँ:

<audio controls>
  <!-- Browser picks the first format it supports: -->
  <source src="podcast.opus" type="audio/ogg; codecs=opus">
  <source src="podcast.ogg" type="audio/ogg; codecs=vorbis">
  <source src="podcast.mp3" type="audio/mpeg">
  <!-- Fallback text if none supported: -->
  <p>Download: <a href="podcast.mp3">podcast.mp3</a></p>
</audio>

वीडियो के अंदर स्रोत

वीडियो के कई प्रारूप उपलब्ध कराएँ:

<video controls width="1280" height="720" poster="thumbnail.jpg">
  <source src="tutorial.webm" type="video/webm">
  <source src="tutorial.mp4" type="video/mp4">
  <p>Your browser doesn't support HTML5 video.
     <a href="tutorial.mp4">Download the video</a></p>
</video>

स्रोत पर प्रकार एट्रिब्यूट

type एट्रिब्यूट ब्राउज़र को MIME प्रकार और कोडेक बताता है:

<!-- Full MIME type with codec parameter: -->
<source src="video.webm" type="video/webm; codecs=vp9,vorbis">
<source src="video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
<source src="audio.ogg" type="audio/ogg; codecs=vorbis">

<!-- Simplified (browser may need to probe): -->
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">

स्रोत का चयन कैसे काम करता है

ब्राउज़र स्रोत तत्वों का क्रम से मूल्यांकन करता है:

पहले स्रोत का type पढ़ता है
यदि वह उस प्रकार को चला सकता है, तो उसे डाउनलोड करके उपयोग करता है
यदि नहीं, तो अगले स्रोत पर जाता है
यदि कोई स्रोत काम नहीं करता, तो वैकल्पिक सामग्री दिखाता है

सबसे पसंदीदा प्रारूप को पहले रखें (जैसे, Chrome/Firefox के बेहतर प्रदर्शन के लिए WebM)।

स्रोत पर मीडिया एट्रिब्यूट

media एट्रिब्यूट आपको अलग-अलग व्यूपोर्ट के लिए अलग-अलग प्रारूप उपलब्ध कराने देता है:

<video controls>
  <!-- Mobile: smaller file -->
  <source
    src="video-480.mp4"
    type="video/mp4"
    media="(max-width: 768px)"
  >
  <!-- Desktop: full quality -->
  <source
    src="video-1080.mp4"
    type="video/mp4"
  >
</video>

अनुशंसित प्रारूप क्रम

अधिकतम अनुकूलता और बेहतर प्रदर्शन के लिए स्रोतों का सर्वोत्तम क्रम:

<video controls>
  <!-- AV1 in WebM: best compression, modern browsers -->
  <source src="video.av1.mp4" type="video/mp4; codecs=av01">

  <!-- VP9 in WebM: Chrome/Firefox/Edge -->
  <source src="video.webm" type="video/webm">

  <!-- H.264 in MP4: universal fallback -->
  <source src="video.mp4" type="video/mp4">
</video>

ऑडियो प्रारूप संबंधी अनुशंसाएँ

ऑडियो कोडेक संबंधी अनुशंसाएँ:

WebM में OPUS — गुणवत्ता और आकार का सर्वोत्तम अनुपात; Chrome, Firefox, Edge
एमपी4 में AAC — सार्वभौमिक; Safari, Chrome, Firefox, Edge
एमपी3 — सबसे व्यापक अनुकूलता; अंतिम वैकल्पिक व्यवस्था के रूप में उपयोग करें

स्रोत-समुच्चय के साथ अनुक्रियाशील वीडियो

वीडियो के लिए बैंडविड्थ के अनुसार अनुकूलन करने हेतु स्रोत पर media का उपयोग करें:

<video controls poster="thumbnail.jpg">
  <source
    src="video-720.webm"
    type="video/webm"
    media="(min-width: 1024px)"
  >
  <source
    src="video-360.webm"
    type="video/webm"
  >
  <source src="video-720.mp4" type="video/mp4" media="(min-width: 1024px)">
  <source src="video-360.mp4" type="video/mp4">
</video>

canPlayType की जाँच

JavaScript से ब्राउज़र के कोडेक समर्थन की जाँच करें:

const video = document.createElement('video');

console.log(video.canPlayType('video/webm; codecs=vp9'));
// '' = no, 'maybe' = possibly, 'probably' = likely yes

console.log(video.canPlayType('video/mp4; codecs=avc1.42E01E'));
// 'probably' on most modern browsers

वैकल्पिक सामग्री

ऑडियो/वीडियो के अंदर हमेशा वैकल्पिक सामग्री शामिल करें:

<video controls width="800" height="450">
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">

  <!-- Fallback for browsers without video support: -->
  <p>
    Your browser does not support HTML5 video.
    <a href="demo.mp4">Download the video</a> instead.
  </p>
</video>

त्वरित जाँच

स्रोत तत्वों को किस क्रम में सूचीबद्ध करना चाहिए?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: स्रोत तत्व

स्रोत तत्व की आवश्यक बातें:

ऑडियो/वीडियो के अंदर <source src type> प्रारूप के विकल्प उपलब्ध कराता है
ब्राउज़र सबसे पहले मेल खाने वाले स्रोत को चुनता है
सबसे आधुनिक प्रारूप पहले; एमपी4/AAC सार्वभौमिक वैकल्पिक व्यवस्था के रूप में
सभी स्रोतों के बाद ऑडियो/वीडियो के अंदर वैकल्पिक पाठ/लिंक शामिल करें
व्यूपोर्ट के आधार पर वीडियो चुनने के लिए स्रोत पर media का उपयोग करें

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “कई फ़ॉर्मैट के लिए source एलिमेंट” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “कई फ़ॉर्मैट के लिए source एलिमेंट” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“कई फ़ॉर्मैट के लिए source एलिमेंट” में मैं क्या सीखूँगा?

source एलिमेंट से वैकल्पिक फ़ॉर्मैट उपलब्ध कराएँ आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“कई फ़ॉर्मैट के लिए source एलिमेंट” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

audio एलिमेंट: src controls loop autoplay
video एलिमेंट और आस्पेक्ट रेशियो
कई फ़ॉर्मैट के लिए source एलिमेंट
track और WebVTT से उपशीर्षक

← HTML Academy पर वापस जाएँ