HTML मीडिया
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>- ज़रूरी controls attribute शामिल करना भूल जाना, जिससे users media को pause नहीं कर पाते।
- sound enabled के साथ media files को auto-play करने की कोशिश करना, जिसे modern browsers block कर देंगे।
- AVI या WAV जैसे outdated raw file formats इस्तेमाल करना जो modern browsers में widely supported नहीं हैं।
- Modern HTML5 native media elements ने पुराने third-party plugins की जगह ले ली है।
- maximum browser support के लिए videos के लिए MP4 या WebM formats, और audio files के लिए MP3 या OGG formats इस्तेमाल करें।
- user convenience के लिए हमेशा controls शामिल करें, और legacy users की मदद के लिए अपने media tags के अंदर fallback links शामिल करें।
standard HTML5 audio और video elements सभी modern desktop और mobile browsers द्वारा natively supported हैं।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: