Embedding audio and video with audio and video in hindi
एचटीएमएल5 वेब पेज में <audio> टैग और <video> टैग का उपयोग वेब पेज और वेबसाइट में डायरेक्ट मल्टीमीडिया कंटेंट जिसमे साउंड और वीडियो ऑब्जेक्ट को डायरेक्ट एम्बेड या इन्सर्ट करने में किया जाता है। एचटीएमएल5 में एचटीएमएल4 वर्जन की तुलना में डायरेक्ट बिना किसी थर्ड पार्टी प्लगिन्स या सपोर्ट के सीधे मीडिया और ऑडियो ऑब्जेक्ट फाइल को इन्सर्ट कर प्ले और कण्ट्रोल किया जा सकता है, वर्त्तमान समय में एचटीएमएल5 में उपलब्ध मल्टीमीडिया टैग वेबसाइट में ऑडियो, वीडियो, एनीमेशन, और 2d और 3d ऑब्जेक्ट इन्सर्ट फीचर्स प्रदान करते है।
Embedding audio in HTML5 web page <audio> tag.
एचटीएमएल5 वेब पेज में जरूरत के अनुसार आप <audio> टैग का उपयोग कर डिजायर ऑडियो फाइल, रिकार्डेड पॉडकास्ट साउंड, या अन्य किसी भी प्रकार के ऑडियो फाइल्स को डायरेक्ट डिजायर वेब पेज में एम्बेड कर मौजूदा वेब ब्राउज़र में प्ले, पॉज, म्यूट और साउंड इफ़ेक्ट कंट्रोल्स कर मैनेज कर सकते है। वर्त्तमान समय में आप अपने एचटीएमएल5 वेब पेज में MP3 ऑडियो फाइल, WAV ऑडियो फाइल और Ogg ऑडियो फाइल सहित अन्य विभिन्न सपोर्टेड ऑडियो फॉर्मेट या एक्सटेंशन को मौजूदा वेब पेज में एम्बेड कर प्ले और कण्ट्रोल कर सकते है।
Audio tag basic syntax in HTML5 web page.
<audio src=”path/to/test.mp3″ controls>
Your web browser not supported audio extension, you need to update, upgrade it first then paly.
</audio>
Audio tag attributes in HTML5.
- Audio src attributes – इन्सर्ट या एम्बेड होने वाले ऑडियो फाइल के ऑनलाइन और ऑफलाइन सोर्स पाथ को डिफाइन करते है।
- Audio control attributes – ऑडियो फाइल के साथ ऑडियो प्लेयर में प्लेबैक कण्ट्रोल को प्ले, पॉज़, वॉल्यूम, कण्ट्रोल को डिस्प्ले करते है।
- Audio autoplay attributes – इन्सर्ट एम्बेड ऑडियो वेब पेज लोड होने पर ऑडियो को ऑटोप्ले मोड में अपने आप स्टार्ट कर देता है। आप अपनी जरूरत के अनुसार इसे कस्टमाइज कर सकते है।
- Audio loop attributes – मौजूदा ऑडियो फ़ाइल को लगातार लूप की तरह एक बार समाप्त होने पर स्टार्ट से बार बार ऑडियो फाइल को लूप कर स्टार्ट और प्ले कर देता है।
- Audio preload attributes – वेब ब्राउज़र में ऑडियो फाइल को कैसे प्रीलोड कर मैनेज करना है, इन फीचर्स को मैनेज कर सकते है.
- audio auto attributes – वेब पेज वेब ब्राउज़र में पेज लोड होने पर वेब ब्राउज़र पूरी ऑडियो फ़ाइल को ऑटो लोड कर स्टार्ट कर देता है।
- audio metadata attributes – वेब ब्राउज़र में ऑडियो फ़ाइल का केवल मेटाडेटा इनफार्मेशन को लोड करता है।
- audio none attributes – ऑडियो टैग में नन ऐट्रिब्यूट्स वेब ब्राउज़र में ऑडियो फ़ाइल को प्रीलोड ऐट्रिब्यूट्स अप्लाई नहीं करता है।
Audio tag attributes example.
<audio src=”audio/sound.mp3″ controls autoplay loop>
Your web browser not supported audio extension, you need to update, upgrade it first then play.
</audio>
HTML5 Audio Tag Detail Example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>HTML5 Audio Tag Attributes</title>
</head>
<body>
<h1>Let Tray Audio Tag </h1>
<audio controls>
<source src=”audio1.mp3″ type=”audio/mpeg”>
<source src=”audio2.ogg” type=”audio/ogg”>
Your web browser not supported audio extension, you need to update, upgrade it first then play.
</audio>
</body>
</html>
Embedding video in HTML5 web page with <video> tag.
एचटीएमएल5 वेब पेज में <video> टैग का उपयोग मौजूदा वेब पेज डिफरेंट टाइप वीडियो फॉर्मेट या वीडियो एक्सटेंशन वीडियो फ़ाइलों, जैसे फिल्म या मूवी, एजुकेशन वीडियो ट्यूटोरियल, ब्लॉग वीडियो, वीडियो इंस्ट्रक्शन, वीडियो गाइड, या अन्य किसी भी प्रकार के वीडियो फाइल को इन्सर्ट या एम्बेड किया जाता है। वर्त्तमान समय में आप अपने एचटीएमएल5 वेब पेज में MP4 वीडियो, WebM वीडियो एक्सटेंशन, और Ogg वीडियो फाइल, सहित अन्य विभिन्न प्रकार के वीडियो फाइल फॉर्मट को इन्सर्ट एम्बेड कर प्ले मैनेज और कण्ट्रोल कर सकते है।
Video tag basic syntax in HTML5 web page.
<video src=”path/to/movie.mp4″ controls width=”500″ height=”250″>
Your web browser not supported video extension, you need to update, upgrade it first then play.
</video>
HTML5 video tag attributes.
- Video src attributes – एचटीएमएल5 वेब पेज में इन्सर्ट एम्बेड वीडियो फाइल के डिफ़ॉल्ट स्टोरेज लोकेशन पाथ को इंडीकेट करता है। ये लोकेशन अब्सोलुट या रिलेटिव हो सकती है।
- Video controls – वेब पेज में इन्सर्ट वीडियो प्लेयर के प्लेबैक कण्ट्रोल में प्ले, पॉज़, वॉल्यूम को कण्ट्रोल और मैनेज कर सकते है।
- Video autoplay – वेब ब्राउज़र में वेब पेज लोड होने पर एम्बेड वीडियो फाइल को ऑटोमेटिकली स्टार्ट कर कर देता है।
- Video loop – मौजूदा वेब पेज वीडियो फिनिश होने के बाद बार बार लूप होता रहता है।
- Video mute – मौजूदा वेब पेज में डिफ़ॉल्ट रूप से वीडियो फाइल के ऑडियो को म्यूट कर डिस्प्ले करते है।
- Video poster – वेब पेज में एम्बेड वीडियो शुरू होने से पहले दिखाई जाने वाली इमेज या पोस्चर फाइल को ऐड या डिस्प्ले करते है। यह वेब ब्राउज़र में वीडियो प्ले होने से पहले वीडियो पोस्चर इमेज को प्रीव्यू करता है।
- Video width and height – मौजूदा वेब पेज में प्ले होने वाले वीडियो प्लेयर के पिक्सेल डायमेंशन हाइट विड्थ में डिफाइन करते है ।
- Video preload – वेब पेज को वेब ब्राउज़र में वीडियो लोड ऐट्रिब्यूट्स को डिफाइन करता है.
- Video auto – वेब पेज लोड होने पर वेब ब्राउज़र में कम्पलीट पूरी वीडियो फ़ाइल लोड होती है।
- Video metadata – मौजूदा वेब पेज में वेब ब्राउज़र केवल वीडियो फ़ाइल का मेटाडेटा इनफार्मेशन वीडियो टाइम को लोड करता है।
- Video none – वेब पेज में वेब ब्राउज़र वीडियो फ़ाइल को प्रीलोड एट्रिब्यूट अप्लाई नहीं करता है।
Example of the HTML5 video tag.
<video src=”video/film.mp4″ controls width=”1920″ height=”1080″ poster=”film1.jpg”>
Your web browser not supported video extension, you need to update, upgrade it first then play.
</video>
HTML5 video extension Example.
<video controls width=”700″ height=”450″>
<source src=”video/video1.mp4″ type=”video/mp4″>
<source src=”video/ video2.webm” type=”video/webm”>
<source src=”video/ video3.ogv” type=”video/ogg”>
Your web browser not supported video extension, you need to update, upgrade it first then play.
</video>
HTML5 Video Tag Detail Example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>HTML5 Video Attributes</title>
</head>
<body>
<h1>Let Tray Some Video Attributes</h1>
<video width=”1920″ height=”1080″ controls>
<source src=”movie1.mp4″ type=”video/mp4″>
<source src=”movie2.ogg” type=”video/ogg”>
Your web browser not supported video extension, you need to update, upgrade it first then play.
</video>
</body>
</html>
