<audio> और <video> मीडिया को नेटिवली एम्बेड करते हैं, बिल्ट-इन कंट्रोल्स और JavaScript API के साथ — कोई प्लग-इन की आवश्यकता नहीं है।
html
Your browser does not support video.
controls — इसके बिना, कोई UI प्रदर्शित नहीं होता (आप JS के माध्यम से कंट्रोल करेंगे)।<source> — ब्राउज़र पहले प्रारूप का उपयोग करता है जिसे वह समर्थन करता है (क्रॉस-ब्राउज़र के लिए WebM/MP4)।poster — प्ले से पहले प्लेसहोल्डर इमेज।preload — none / metadata / auto ; बड़ी फ़ाइलों को डाउनलोड करने से बचने के लिए metadata का उपयोग करें जब तक आवश्यक न हो।autoplay muted loop — बैकग्राउंड वीडियो के लिए (अधिकांश ब्राउज़र autoplay की अनुमति देने के लिए muted की आवश्यकता रखते हैं)।<track> — एक्सेसिबिलिटी के लिए कैप्शन/सबटाइटल्स (.vtt फ़ाइल)।const v = document.querySelector("video");
v.play(); // returns a promise (may reject if autoplay blocked)
v.pause();
v.currentTime = 30; // seek to 30 seconds
v.volume = 0.5;
v.addEventListener("ended", () => console.log("finished"));
<audio> बिल्कुल समान काम करता है, बस विजुअल फ्रेम/पोस्टर के बिना।
नेटिव मीडिया एलिमेंट्स आपको क्रॉस-ब्राउज़र प्लेबैक, एक्सेसिबिलिटी (<track> के माध्यम से कैप्शन), और कस्टम प्लेयर्स के लिए पूर्ण JS API प्रदान करते हैं।
फॉर्मेट-फॉलबैक पैटर्न, muted-for-autoplay नियम, और प्रदर्शन के लिए preload को जानना मीडिया एम्बेड करने की व्यावहारिक आवश्यकताओं को कवर करता है।