एचटीएमएल <स्रोत> टैग
उदाहरण
दो स्रोत फ़ाइलों वाला एक ऑडियो प्लेयर। ब्राउज़र पहले <source> का चयन करेगा जो इसका समर्थन करता है:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
टैग का <source>उपयोग मीडिया तत्वों के लिए कई मीडिया संसाधनों को निर्दिष्ट करने के लिए किया जाता है, जैसे कि
<वीडियो> , <ऑडियो> और <चित्र> ।
टैग आपको ब्राउज़र समर्थन या व्यूपोर्ट चौड़ाई के आधार पर वैकल्पिक वीडियो/ऑडियो/छवि फ़ाइलों को निर्दिष्ट करने की <source>अनुमति देता है, जिन्हें ब्राउज़र चुन सकता है। ब्राउज़र सबसे पहले <source>
समर्थन करने वाले का चयन करेगा।
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से तत्व का समर्थन करता है।
| Element | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
गुण
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Accepts any valid media query that would normally be defined in a CSS |
| sizes | Specifies image sizes for different page layouts | |
| src | URL | Required when <source> is used in <audio> and <video>. Specifies the URL of the media file |
| srcset | URL | Required when <source> is used in <picture>. Specifies the URL of the image to use in different situations |
| type | MIME-type | Specifies the MIME-type of the resource |
वैश्विक गुण
<source>टैग HTML में वैश्विक विशेषताओं का भी समर्थन करता है ।
घटना गुण
<source>टैग HTML में ईवेंट विशेषताओं का भी समर्थन करता है ।
और ज्यादा उदाहरण
उदाहरण
वीडियो चलाने के लिए <source> के अंदर <video> का इस्तेमाल करें:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
उदाहरण
व्यूपोर्ट की चौड़ाई के आधार पर अलग-अलग छवियों को परिभाषित करने के लिए <source> भीतर <चित्र> का उपयोग करें:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
संबंधित पृष्ठ
एचटीएमएल ट्यूटोरियल: एचटीएमएल वीडियो
एचटीएमएल ट्यूटोरियल: एचटीएमएल ऑडियो
एचटीएमएल डोम संदर्भ: स्रोत वस्तु
डिफ़ॉल्ट सीएसएस सेटिंग्स
कोई नहीं।