मीडिया-संबंधित टैग

यह लेख मीडिया-संबंधित टैग के बारे में बताता है।

यह समझाता है कि HTML में छवियों, वीडियो, ऑडियो आदि का वर्णन कैसे करें, साथ ही असंपीड्य तत्व और इनलाइन फ्रेम।

YouTube Video

मीडिया-संबंधित टैग

<img> टैग

1<img src="/images/image.jpg" alt="Description of the image" width="200">

• <img> टैग का उपयोग छवियों को एम्बेड करने के लिए किया जाता है। src गुणछवि के पथ को निर्दिष्ट करता है, और alt गुण एक विवरण प्रदान करता है जब छवि प्रदर्शित नहीं की जा सकती।

<figure> और <figcaption> टैग

1<figure>
2    <img src="/images/image.jpg" alt="A beautiful scenery" width="200">
3    <figcaption>A beautiful scenery</figcaption>
4</figure>

• <figure> टैग मीडिया सामग्री जैसे छवियों या चित्रों को शीर्षक के साथ समूहीकृत करता है, <figcaption> टैग का उपयोग करते हुए।

<picture> टैग

1<picture>
2    <source media="(min-width: 800px)" srcset="/images/large.jpg">
3    <source media="(min-width: 400px)" srcset="/images/medium.jpg">
4    <img src="/images/small.jpg" alt="Responsive image" width="200">
5</picture>

• <picture> टैग उत्तरदायी छवियों का समर्थन करता है, जो विभिन्न प्रदर्शन स्थितियों के आधार पर उपयुक्त छवि का चयन करने की अनुमति देता है।

• मीडिया विशेषता CSS मीडिया क्वेरी के समान प्रारूप में शर्तें निर्दिष्ट करती है।

  • आप न्यूनतम चौड़ाई (min-width), अधिकतम चौड़ाई (max-width), या स्क्रीन का ओरिएंटेशन (orientation) जैसी शर्तें निर्दिष्ट कर सकते हैं।

• इस उदाहरण में, निम्नलिखित चित्र स्क्रीन चौड़ाई के आधार पर दिखाए जाते हैं।

  • यदि स्क्रीन की चौड़ाई 800px या उससे अधिक है, तो large.jpg प्रदर्शित किया जाता है।
  • यदि स्क्रीन की चौड़ाई 400px या उससे अधिक है लेकिन 800px से कम है, तो medium.jpg प्रदर्शित किया जाता है।
  • यदि स्क्रीन की चौड़ाई 400px से कम है, तो small.jpg (<img> टैग में दिया गया चित्र) प्रदर्शित किया जाता है।

<canvas> टैग

1<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
2<script>
3    var canvas = document.getElementById('myCanvas');
4    var ctx = canvas.getContext('2d');
5    ctx.fillStyle = "#FF0000";
6    ctx.fillRect(10, 10, 150, 100);
7</script>

• <canvas> टैग एक क्षेत्र प्रदान करता है जहाँ गतिशील ग्राफ़िक्स JavaScript का उपयोग करके खींचे जा सकते हैं।

<map> टैग

1<img src="/images/example.jpg" usemap="#example-map" alt="Example Map">
2<map name="example-map">
3    <area shape="rect" coords="34,44,270,350" alt="Area 1" href="https://codesparklab.com">
4</map>

• <map> टैग का उपयोग एक छवि मानचित्र को परिभाषित करने के लिए किया जाता है। मानचित्र के भीतर क्लिक करने योग्य क्षेत्र <area> टैग का उपयोग करके परिभाषित किए जाते हैं। यह छवि के विशिष्ट भागों को क्लिक करने योग्य बनाने की अनुमति देता है, जिससे वे एक लिंक पर ले जाते हैं।
• usemap एट्रिब्यूट में <img> टैग में जुड़े हुए मानचित्र तत्व (<map> टैग) के नाम को निर्दिष्ट करें, जिसे # के साथ प्रारंभ करें।
• <area> टैग के alt एट्रिब्यूट को उपयुक्त रूप से निर्दिष्ट करके, आप दृष्टिहीन उपयोगकर्ताओं के लिए पहुंच में सुधार कर सकते हैं।

<embed> टैग

1<embed src="movie.mp4" width="300" height="200">

• <embed> टैग का उपयोग बाहरी सामग्री जैसे पीडीएफ, वीडियो, या ऑडियो को एम्बेड करने के लिए किया जाता है।

<video> टैग

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• <video> टैग का उपयोग वीडियो सामग्री को एम्बेड करने के लिए किया जाता है। आप <source> टैग का उपयोग करके कई प्रारूप निर्दिष्ट कर सकते हैं।

1<video controls width="300" preload="none">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• preload विशेषता आपको यह निर्दिष्ट करने की अनुमति देती है कि प्लेबैक शुरू होने से पहले ब्राउज़र द्वारा वीडियो का कितना हिस्सा लोड किया जाना चाहिए।
  • auto ब्राउज़र को पूरे मीडिया को प्रीलोड करने का निर्देश देता है। यह प्लेबैक शुरू करने में देरी को कम कर सकता है, लेकिन डेटा डाउनलोड किया जा सकता है, भले ही उपयोगकर्ता मीडिया न चलाए।
  • metadata केवल मीडिया की मेटाडाटा (जैसे, अवधि, ट्रैक जानकारी) को लोड करता है। मीडिया डेटा तब तक लोड नहीं किया जाता जब तक उपयोगकर्ता प्लेबैक शुरू नहीं करता। यह तब उपयुक्त है जब आपको मीडिया के बारे में सारांश जानकारी चाहिए।
  • none मीडिया फ़ाइल को प्रीलोड नहीं करता है। मीडिया तब तक संसाधन डाउनलोड नहीं करता जब तक प्लेबैक शुरू नहीं होता। यह उपयुक्त है जब आप डेटा उपयोग को न्यूनतम रखना चाहते हैं।

<audio> टैग

1<audio controls>
2    <source src="sound.mp3" type="audio/mpeg">
3    <source src="sound.ogg" type="audio/ogg">
4    Your browser does not support the audio element.
5</audio>

• <audio> टैग का उपयोग ऑडियो सामग्री को एम्बेड करने के लिए किया जाता है। <source> टैग कई प्रारूपों का समर्थन करता है।
• <video> टैग की तरह, preload विशेषता का उपयोग यह निर्दिष्ट करने के लिए किया जा सकता है कि प्लेबैक शुरू होने से पहले कितनी ऑडियो लोड होनी चाहिए।

<track> टैग

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
4    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
5    Your browser does not support the video tag.
6</video>

• <track> टैग का उपयोग टेक्स्ट ट्रैक्स जैसे उपशीर्षक और कैप्शंस को निर्दिष्ट करने के लिए किया जाता है। इसे <audio> या <video> टैग्स के अंदर उपयोग किया जा सकता है।
• kind विशेषता आपको ट्रैक के उद्देश्य को निर्दिष्ट करने की अनुमति देती है (जैसे, उपशीर्षक, कैप्शंस, अध्याय, आदि)। आप निम्न मान निर्दिष्ट कर सकते हैं।
  • subtitles उपशीर्षक प्रदान करते हैं जो वीडियो या ऑडियो की सामग्री का अनुवाद करते हैं या दर्शकों के लिए इसे समझना आसान बनाते हैं। इसका मुख्य उद्देश्य ऑडियो का सीधा अनुवाद है।
  • captions ऑडियो के साथ संगीत और ध्वनि प्रभाव जैसी अतिरिक्त जानकारी प्रदान करते हैं, जो बधिर या सुनने में कठिनाई वाले लोगों के लिए होती है।
  • descriptions ऐसे ट्रैक्स हैं जो दृष्टिहीन लोगों के लिए वीडियो की दृश्य सामग्री को जैसे क्रियाओं और दृश्यावली का वर्णन करते हैं।
  • chapters चैप्टर मार्कर (अध्याय शीर्षक) प्रदान करते हैं जो वीडियो के भीतर विशेष बिंदुओं को दर्शाते हैं।
  • metadata मीडिया को पार्स या प्रोसेस करने के लिए अतिरिक्त जानकारी प्रदान करता है लेकिन उपयोगकर्ताओं को प्रदर्शित नहीं किया जाता।

<iframe> टैग

1<iframe src="https://codesparklab.com" width="300" height="200"></iframe>

• <iframe> टैग का उपयोग वर्तमान पृष्ठ में अन्य HTML पृष्ठों या बाहरी सामग्री (जैसे वेबसाइट, वीडियो, या दस्तावेज़) को एम्बेड करने के लिए किया जाता है। यह अक्सर किसी पृष्ठ पर YouTube वीडियो एम्बेड करने के लिए उपयोग किया जाता है।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video