HTML5 <source> Tag
Introduction to HTML5 <source> Tag
किसी भी webpage में कोई audio या video add करने के लिए आप <audio> और <video> tags use करते है। इन tags में src attribute के द्वारा आप उस media file की location specify करते है जिसे आप include करना चाहते है। ये एक simple process है जैसा की आप images को add करते समय करते है।
लेकिन कई बार ऐसा हो सकता है की आपके webpage को user किसी different web browser द्वारा देख रहा है और वह browser आपके द्वारा add किये गए audio और video format को support नहीं करता है। ऐसी situation में आपका media resource उस browser में load नहीं होगा।
इस situation में ऐसे mechanism की आवश्यकता है जिससे की alternative media file formats को add किया जा सके जिनमें से browser appropriate supportive file format को choose करके load कर सके। इसके लिए HTML5 आपको <source> tag provide करती है।
<source> tag के द्वारा आप media elements को include करते समय एक से अधिक media resources define कर सकते है। ये उन situations के लिए होता है जब browser किसी media file type को support नहीं करता है। ऐसे में browser multiple resources में से select करके जिस भी media format को वह support करता है उसे ही load कर देता है।
Syntax of HTML5 <source> Tag
निचे <source> tag का general syntax दिया जा रहा है।
<source src="media-file-URL">
<source src="other-format-media-file-URL">
जैसा की आप ऊपर दिए गए syntax में देख सकते है <source> tag का कोई भी closing tag नहीं होता है। <source> tag के साथ src attribute को use करना अनिवार्य होता है।
Attributes of HTML5 <source> Tag
<source> tag के साथ निचे दिए गए attributes available है।
- src - जब आप <source> tag को video और audio tags के साथ use करते है तो यह attribute media resources की location define करने के लिए use किया जाता है।
- srcset - जब आप <source> tag को <picture> tag के साथ use करते है तो यह attribute image का URL define करने के लिए use किया जाता है।
- media - इस attribute के द्वारा आप वे media queries define कर सकते है जो आप normally CSS के द्वारा define करते है।
- sizes - इस attribute के द्वारा आप अलग अलग layouts के लिए अलग अलग image sizes define कर सकते है।
- type - यह attribute media resource का MIME type define करने के लिए use किया जाता है।
<source> tag HTML के सभी global attributes और event attributes को भी support करता है।
Example of HTML5 <source> Tag
<html>
<head>
<title>Source Tag Demo</title>
</head>
<body>
<video controls>
<source src="videos/example.mp4">
<source src="videos/example.flv">
</video>
</body>
</html>
जैसा की आप ऊपर दिए गए उदाहरण में देख सकते है <source> tag के द्वारा दो media resources को specify किया गया है। जो browser mp4 format को support नहीं करता है वह flv file को load करेगा।