HTML Media
In this page:
<video controls>
<source src="file.mp4" type="video/mp4">
</video>
<audio controls>
<source src="file.mp3" type="audio/mpeg">
</audio>वेब Media का विकास
वेब के शुरुआती दिनों में, ब्राउज़र audio या video फाइलें native रूप से चला नहीं पाते थे। डेवलपर्स को Flash Player जैसे भारी-भरकम, असुरक्षित third-party plugins पर निर्भर रहना पड़ता था। मॉडर्न HTML5 ने native video और audio टैग्स लाकर इसे हल किया।
उदाहरण: The Evolution of Web Media
<video src="movie.mp4" controls></video>स्टैण्डर्ड वेब Media फॉर्मेट
वेब परफॉर्मेंस काफी हद तक सही media फॉर्मेट चुनने पर निर्भर करती है। videos के लिए, MP4 (ज़्यादा से ज़्यादा compatibility के लिए) या WebM (हाई-परफॉर्मेंस compression के लिए) का उपयोग करें। audio के लिए, MP3 या OGG फॉर्मेट का उपयोग करें।
उदाहरण: Standard Web Media Formats
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
</video>Media Layout साइज़ कंट्रोल करना
डिफ़ॉल्ट रूप से, video players अपने native फाइल आयामों पर दिखते हैं। आप HTML attributes या CSS properties का उपयोग करके उनकी width और height को आसानी से कंट्रोल करके अपने पेज लेआउट में फिट करा सकते हैं।
उदाहरण: Controlling Media Layout Sizes
<video src="movie.mp4" controls style="width: 100%; max-width: 600px;"></video>Fallback समाधान उपलब्ध कराना
हालांकि native HTML5 media एलिमेंट्स सभी मॉडर्न ब्राउज़र में सपोर्टेड हैं, कुछ legacy डिवाइस उन्हें रेंडर करने में असफल हो सकते हैं। आपको हमेशा उन यूज़र की मदद के लिए अपने media टैग्स के अंदर fallback टेक्स्ट या डाउनलोड लिंक शामिल करने चाहिए।
उदाहरण: Providing Fallback Solutions
<video src="movie.mp4" controls>
<a href="movie.mp4">Download the video</a>
</video>Native Playback Attributes
मॉडर्न HTML5 media एलिमेंट्स में बिल्ट-इन attributes (जैसे controls, autoplay, loop, और muted) शामिल हैं जो आपको अपने video और audio players के native व्यवहार को कस्टमाइज़ करने देते हैं।
उदाहरण: Native Playback Attributes
<video src="movie.mp4" controls autoplay loop muted></video>Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: