बिना किसी प्लगइन के ध्वनि, वीडियो और कैप्शन वाले चित्र एम्बेड करें।
इस पाठ को Kodokon में खोलेंHTML ऑडियो और वीडियो को मूल रूप से चलाता है: किसी बाहरी प्लेयर की ज़रूरत नहीं। वास्तविक उपयोग के मामले: ब्लॉग पर एक पॉडकास्ट एपिसोड, लैंडिंग पेज पर एक प्रोडक्ट डेमो, दस्तावेज़ में एम्बेडेड एक ट्यूटोरियल। आइए देखें इसे सही तरीके से कैसे करें।
<video controls width="640" poster="preview.jpg">
<source src="demo.webm" type="video/webm">
<source src="demo.mp4" type="video/mp4">
<track src="subs-fr.vtt" kind="subtitles"
srclang="fr" label="French" default>
Your browser doesn't support HTML5 video.
</video>तीन पेशेवर सबक। source एलिमेंट क्रम में आज़माए जाते हैं: ब्राउज़र पहला वाला चलाता है जिसे वह डिकोड कर सकता है। poster एट्रिब्यूट प्लेबैक से पहले एक प्लेसहोल्डर इमेज दिखाता है। आख़िर में, track WebVTT फ़ॉर्मैट में सबटाइटल जोड़ता है: सुलभता के लिए अनिवार्य और मौन देखने के लिए बहुत सराहनीय।
<audio controls preload="metadata">
<source src="podcast-ep12.mp3" type="audio/mpeg">
<a href="podcast-ep12.mp3">Download the episode</a>
</audio>सामग्री को दर्शाने के लिए, figure एक मीडिया एलिमेंट को figcaption के ज़रिए उसके कैप्शन के साथ जोड़ता है। और केवल इमेज ही नहीं: एक चार्ट, एक कोड स्निपेट या एक उद्धरण भी अच्छे उम्मीदवार हैं। कैप्शन figure से प्रोग्रामेटिक रूप से जुड़ा होता है, जो इमेज के नीचे एक सादा पैराग्राफ नहीं दे सकता।
<figure>
<img src="chart-sales.png"
alt="Sales up 12% in Q2 2026">
<figcaption>
Sales trend, second quarter of 2026.
</figcaption>
</figure><video autoplay ___ loop width="640">
<source src="clip.mp4" type="video/mp4">
</video>