जैसा कि आपने images मॉड्यूल में जाना, HTML किसी वेब पेज में मीडिया एम्बेड करने की सुविधा चालू करता है. इस सेक्शन में, हम ऑडियो और वीडियो फ़ाइलों पर नज़र डालते हैं. जैसे, उन्हें एम्बेड करने का तरीका, उपयोगकर्ता के कंट्रोल, अपने वीडियो के लिए स्टैटिक इमेज प्लेसहोल्डर उपलब्ध कराने के साथ-साथ, ऑडियो और वीडियो फ़ाइलों को ऐक्सेस करने लायक बनाने के सबसे सही तरीके.
<audio> और <video>
<video> और <audio> एलिमेंट का इस्तेमाल, मीडिया प्लेयर को सीधे src एट्रिब्यूट के साथ एम्बेड करने के लिए किया जा सकता है. इसके अलावा, इन्हें <source> एलिमेंट की सीरीज़ के लिए कंटेनर एलिमेंट के तौर पर इस्तेमाल किया जा सकता है. हर एलिमेंट से src फ़ाइल का सुझाव दिया जा सकता है. भले ही, <video> का इस्तेमाल एक ऑडियो फ़ाइल को एम्बेड करने के लिए किया जा सकता है, लेकिन साउंड फ़ाइलों को एम्बेड करने के लिए, <audio> एलिमेंट को प्राथमिकता दी जाती है.
शुरुआती <video> और <audio> टैग में कई दूसरे एट्रिब्यूट हो सकते हैं. इनमें
controls, autoplay, loop, mute, preload, और ग्लोबल एट्रिब्यूट शामिल हैं. <video> एलिमेंट, height, width, और
poster एट्रिब्यूट के साथ भी काम करता है.
<video src="videos/machines.webm" poster="images/machine.jpg" controls>
<p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>
<video> के इस उदाहरण में, सिंगल सोर्स है, जिसमें src एट्रिब्यूट को वीडियो सोर्स से लिंक किया गया है. poster एट्रिब्यूट, वीडियो लोड होने पर दिखाने के लिए एक इमेज देता है. आखिर में, controls एट्रिब्यूट, उपयोगकर्ता के वीडियो के कंट्रोल देता है.
फ़ॉलबैक कॉन्टेंट को शुरुआती और बंद टैग के बीच में शामिल किया जाता है. अगर उपयोगकर्ता एजेंट, <video> या <audio> के साथ काम नहीं करता, तो यह कॉन्टेंट दिखता है. बंद होने वाले </video> टैग की ज़रूरत होती है, भले ही दोनों के बीच कोई भी कॉन्टेंट न हो
(लेकिन फ़ॉलबैक कॉन्टेंट हमेशा होना चाहिए , है न?).
अगर शुरुआती <video> या <audio> टैग में कोई src एट्रिब्यूट शामिल नहीं है, तो एक या उससे ज़्यादा <source> एलिमेंट शामिल करें. हर एलिमेंट में मीडिया फ़ाइल के लिए src एट्रिब्यूट जोड़ा जाना चाहिए. नीचे दिए गए उदाहरण में मीडिया फ़ाइल के तीन विकल्प, फ़ॉलबैक कॉन्टेंट, और अंग्रेज़ी और फ़्रेंच सबटाइटल शामिल हैं. ये सबटाइटल, शुरुआती और बंद टैग के बीच में होते हैं.
<video controls poster="images/machine.jpg">
<source src="videos/machines.webm" type="video/webm">
<source src="videos/machines.mp4" type="video/mp4">
<source src="videos/machines.ogv" type="video/ogg">
<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" />
<p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>
हर <source> बच्चे में एक src एट्रिब्यूट शामिल होता है, जो रिसॉर्स के बारे में बताता है. साथ ही, type एट्रिब्यूट, ब्राउज़र को लिंक की गई फ़ाइल के मीडिया टाइप के बारे में बताता है. यह ब्राउज़र को उन मीडिया फ़ाइलों को फ़ेच करने से रोकता है जिन्हें वह डिकोड नहीं कर पाएगा.
type एट्रिब्यूट में, एक codecs पैरामीटर शामिल किया जा सकता है, जिससे पता चलता है कि रिसॉर्स को किस तरह कोड में बदला गया है. कोडेक, उन मीडिया ऑप्टिमाइज़ेशन को शामिल करने का एक तरीका है जो अभी सभी ब्राउज़र पर काम नहीं करते. कोडेक को मीडिया टाइप से सेमीकोलन की मदद से अलग किया जाता है. उदाहरण के लिए, कोडेक को समझने लायक सिंटैक्स का इस्तेमाल करके लिखा जा सकता है, जैसे कि <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">. इससे पता चलता है कि
WebM फ़ाइलों में VP8 वीडियो और Vorbis ऑडियो शामिल हैं. कोडेक को समझना भी ज़्यादा मुश्किल हो सकता है, जैसे कि <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a">. इससे पता चलता है कि MP4 एन्कोडिंग को बेहतर वीडियो कोडिंग मुख्य प्रोफ़ाइल लेवल 4.2 माना जाता है. इस सिंटैक्स के बारे में बताना,
इस लेसन में शामिल नहीं है. अगर आपको ज़्यादा जानकारी चाहिए, तो जेक आर्चिबाल्ड ने AV1 वीडियो के लिए कोडेक पैरामीटर तय करने का तरीका बताया है.
कोई वीडियो दिखाते समय, डिफ़ॉल्ट रूप से वीडियो का पहला फ़्रेम, उपलब्ध होने पर स्टिल शॉट के तौर पर दिखता है.
यह एक ऐसी चीज़ है जिसे नियंत्रित किया जा सकता है. poster एट्रिब्यूट की मदद से, वीडियो डाउनलोड होने के दौरान और उसे चलाने तक, इमेज का सोर्स दिखता है. अगर वीडियो चलता है और बाद में उसे रोक दिया जाता है, तो पोस्टर को फिर से नहीं दिखाया जाता है.
अपने वीडियो का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) ज़रूर तय करें. ऐसा इसलिए, क्योंकि वीडियो लोड होने पर, पोस्टर और वीडियो के साइज़ के बीच फ़र्क़ होने की वजह से रीफ़्लो और रीपेंट होगा.
हमेशा boolean controls एट्रिब्यूट शामिल करें. ऐसा करने से लोगों के लिए कंट्रोल दिखने लगते हैं. इससे लोगों को ऑडियो लेवल को कंट्रोल करने, ऑडियो को पूरी तरह से म्यूट करने, और वीडियो को फ़ुलस्क्रीन पर देखने की सुविधा मिलती है.
controls को छोड़ने से उपयोगकर्ता को खराब अनुभव मिलता है, खास तौर पर तब, जब बूलियन autoplay एट्रिब्यूट को शामिल किया गया हो. ध्यान दें कि अगर बूलियन muted एट्रिब्यूट को हटा दिया जाता है, तो कुछ ब्राउज़र autoplay एट्रिब्यूट डायरेक्टिव पर ध्यान नहीं देंगे. इसकी वजह यह है कि मीडिया फ़ाइल के अपने-आप चलने की सुविधा से, आम तौर पर उपयोगकर्ताओं को बुरा अनुभव मिलता है. भले ही, उपयोगकर्ता को म्यूट किया गया हो और ऐसे कंट्रोल दिख रहे हों.
ट्रैक
ऑडियो और वीडियो, दोनों के शुरुआती और ज़रूरी बंद टैग के बीच में, तय समय पर दिखने वाले टेक्स्ट ट्रैक तय करने के लिए, एक या एक से ज़्यादा <track> एलिमेंट शामिल करें. नीचे दिए गए उदाहरण में <track> की दो फ़ाइलें शामिल हैं. ये फ़ाइलें अंग्रेज़ी और फ़्रेंच, दोनों भाषाओं में तय समय वाले टेक्स्ट के सबटाइटल उपलब्ध कराती हैं.
<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Français" kind="subtitles" srclang="fr" lang="fr-fr" src="vtt/subtitles-fr.vtt" />
src एट्रिब्यूट में दी गई ट्रैक फ़ाइलें, WebVTT फ़ॉर्मैट (.vtt) में होनी चाहिए.
जब तक crossorigin एट्रिब्यूट शामिल न किया गया हो, तब तक फ़ाइलें उसी डोमेन पर होनी चाहिए जिस पर एचटीएमएल दस्तावेज़ है.
ट्रैक kind एट्रिब्यूट के लिए पांच वैल्यू दी गई हैं: subtitles, captions, descriptions, chapters, और अन्य metadata.
डायलॉग ट्रांसक्रिप्शन और अनुवाद के लिए, srclang एट्रिब्यूट के साथ subtitles को शामिल करें. हर label एट्रिब्यूट की वैल्यू,
उपयोगकर्ता को विकल्प के तौर पर दिखती है. चुना गया VTT विकल्प, वीडियो के ऊपर दिखता है. ::cue/ ::cue() को टारगेट करके, सबटाइटल की स्टाइल तय की जा सकती है.
kind="caption" वैल्यू को बोली को लेख में बदलने और उन अनुवादों के लिए रिज़र्व रखा जाना चाहिए जिनमें साउंड इफ़ेक्ट और काम की अन्य ऑडियो जानकारी शामिल हो.
यह सुविधा सिर्फ़ ऐसे दर्शकों के लिए नहीं है जो सुन नहीं सकते. ऐसा हो सकता है कि किसी व्यक्ति को अपना हेडफ़ोन न दिखे. इसलिए, उसने कैप्शन चालू कर दिए हैं. या हो सकता है कि उन्होंने अपने पसंदीदा पॉडकास्ट के आखिरी कुछ पॉइंट नहीं समझ पाए. इसलिए, वे ट्रांसक्रिप्ट पढ़ना चाहते हैं, ताकि इस बात की पुष्टि कर सकें कि वे समझ गए हैं.
ऑडियो और वीडियो कॉन्टेंट को ऐक्सेस करने के दूसरे तरीकों का होना, ज़रूरी और सुविधाजनक, दोनों हैं.
kind="description", वीडियो में विज़ुअल कॉन्टेंट के टेक्स्ट ब्यौरे के लिए है. ये उपयोगकर्ता वीडियो नहीं देख सकते. भले ही, वे Google Home या Alexa जैसे किसी स्क्रीन के बिना सिस्टम का इस्तेमाल कर रहे हों या वे अंधे हों.
WebVTT फ़ॉर्मैट का इस्तेमाल करके कैप्शन और सबटाइटल उपलब्ध कराने से, उन लोगों को वीडियो ऐक्सेस करने में मदद मिलती है जिन्हें ठीक से सुनाई नहीं देता. याद रखें कि दिव्यांगता का मतलब, किसी व्यक्ति और उसके मौजूदा माहौल के बीच का अंतर होता है. सुनने में दिक्कत होने की कई वजहें हो सकती हैं. जैसे, उपयोगकर्ता ज़्यादा शोर में रहता है, उसके स्पीकर में गड़बड़ी होती है या हेडफ़ोन खराब होता है. इसके अलावा, उपयोगकर्ता को सुनने में कुछ समस्या या बहरा होने की वजह से भी सुनाई देना बंद हो सकता है. यह पक्का करें कि आपके कॉन्टेंट को ऐक्सेस किया जा सके. इससे आपकी उम्मीद से ज़्यादा लोगों को मदद मिलती है. इससे सभी को मदद मिलती है.
बैकग्राउंड में चलने वाले वीडियो के लिए ध्यान देने वाली बातें
आपकी मार्केटिंग या डिज़ाइन टीम शायद आपकी साइट में कोई बैकग्राउंड वीडियो शामिल करना चाहे. आम तौर पर, इसका मतलब यह है कि वे बिना किसी कंट्रोल के, म्यूट किया गया, अपने-आप चलने वाला, लूप में चलने वाला वीडियो चाहते हैं. एचटीएमएल कुछ ऐसा दिख सकता है:
<video autoplay loop muted poster="images/machine.jpg" role="none">
<source src="videos/machines.webm" type="video/webm">
<source src="videos/machines.mp4" type="video/mp4">
<source src="videos/machines.ogv" type="video/ogg">
</video>
बैकग्राउंड में चलने वाले वीडियो ऐक्सेस नहीं किए जा सकते. उपयोगकर्ताओं को वीडियो चलाने और सभी कैप्शन का ऐक्सेस न दिए जाने पर, उन्हें बैकग्राउंड में चलने वाले वीडियो के ज़रिए इसकी जानकारी नहीं दी जानी चाहिए. यह वीडियो पूरी तरह से सजावट के लिए है. इसलिए, इसमें none की ARIA भूमिका
शामिल है और इसमें फ़ॉलबैक कॉन्टेंट को शामिल नहीं किया जाता है.
हमेशा म्यूट किए गए वीडियो की परफ़ॉर्मेंस को बेहतर बनाने के लिए, अपने मीडिया सोर्स से ऑडियो ट्रैक हटाएं.
अगर आपका वीडियो पांच सेकंड या उससे कम समय तक चलता है, तो सुलभता के दिशा-निर्देशों के लिए, वीडियो पर रोक लगाने की ज़रूरत नहीं होती. हालांकि, बूलियन loop एट्रिब्यूट वाली कोई भी चीज़ डिफ़ॉल्ट रूप से हमेशा के लिए लूप में चलती रहेगी. इस दौरान, पांच सेकंड या इससे कम समय की समयसीमा खत्म हो जाएगी. अच्छे उपयोगकर्ता अनुभव के लिए, हमेशा वीडियो को रोकने का तरीका शामिल करें. controls को शामिल करके यह काम आसानी से किया जा सकता है.
पसंद के मुताबिक मीडिया कंट्रोल
ब्राउज़र में पहले से मौजूद कंट्रोल के बजाय, पसंद के मुताबिक वीडियो या ऑडियो कंट्रोल दिखाने के लिए, controls एट्रिब्यूट शामिल करें. इसके बाद,
पसंद के मुताबिक मीडिया कंट्रोल जोड़ने और कंट्रोल एट्रिब्यूट हटाने के लिए, JavaScript का इस्तेमाल करें. उदाहरण के लिए, ऐसा <button> जोड़ा जा सकता है जो
किसी ऑडियो फ़ाइल के चलने की स्थिति को टॉगल करता है.
<button id="playPause" aria-controls="idOfAudio"
data-pause-text="Pause audio"
data-play-text="Play audio">Pause audio</button>
इस उदाहरण में dataset एट्रिब्यूट वाला एक बटन शामिल है, जिसमें टेक्स्ट है. इसे तब अपडेट किया जाएगा, जब वेबसाइट पर आने वाले व्यक्ति के लिए, प्ले और पॉज़ की स्थिति के बीच टॉगल करना होगा. aria-controls एट्रिब्यूट, एलिमेंट के id के साथ शामिल होता है. इस एलिमेंट को बटन से कंट्रोल किया जाता है. इस मामले में ऑडियो. ऑडियो को कंट्रोल करने वाले हर बटन में एक इवेंट हैंडलर होता है.
पसंद के मुताबिक कंट्रोल बनाने के लिए, HTMLMediaElement.play() और
HTMLMediaElement.pause() का इस्तेमाल करें. प्ले स्टेट को टॉगल करते समय,
बटन के टेक्स्ट को भी टॉगल करें:
const pauseButton = document.getElementById('playPause');
pauseButton.addEventListener("click", pauseAndPlay, false);
function pauseAndPlay() {
console.log(this);
const media = document.getElementById(this.getAttribute('aria-controls'));
if (media.paused) {
media.play();
this.innerText = this.dataset.pauseText;
} else {
media.pause();
this.innerText = this.dataset.playText;
}
}
controls एट्रिब्यूट को शामिल करके, उपयोगकर्ता के पास ऑडियो (या वीडियो) को कंट्रोल करने का तरीका होता है, भले ही JavaScript काम न करता हो.
रीप्लेसमेंट बटन को इंस्टैंशिएट करने के बाद ही, कंट्रोल एट्रिब्यूट को हटाएं.
document.querySelector('[aria-controls]').removeAttribute('controls');
जब उपयोगकर्ता कंट्रोल को ऐक्सेस न कर पाएं, तो उन्हें हमेशा बाहरी कंट्रोल शामिल करें. उदाहरण के लिए, ऐसे बैकग्राउंड वीडियो जिनमें उनका कंट्रोल साइट कॉन्टेंट के पीछे छिपा होता है. पर्यावरण और देखने से जुड़ी अलग-अलग ज़रूरतों वाले उपयोगकर्ताओं के लिए मीडिया के लिए सुलभता से जुड़ी शर्तों की बुनियादी बातों को समझना ज़रूरी है. इनमें ऐसे लाखों लोग भी शामिल हैं जो कम दिखते हैं और जिन्हें देखने में परेशानी होती है.
हमने अभी-अभी HTMLMediaElement के बारे में बात की है. इसमें ऐसी कई प्रॉपर्टी, तरीके, और इवेंट दिए गए हैं जिन्हें HTMLVideoElement और HTMLAudioElement, दोनों से इनहेरिट किया जाता है. इसमें HTMLMediaElement ने अपनी खुद की कुछ प्रॉपर्टी, तरीके, और इवेंट जोड़े हैं. कई दूसरे मीडिया एपीआई हैं,
जिनमें एक TextTrack API भी शामिल है. किसी उपयोगकर्ता के माइक्रोफ़ोन से ऑडियो रिकॉर्ड करने या उपयोगकर्ता की स्क्रीन रिकॉर्ड करने के लिए, मीडिया कैप्चर और स्ट्रीम और MediaDevices API का इस्तेमाल किया जा सकता है. Web Audio API
ऑडियो और स्ट्रीमिंग में लाइव और पहले से रिकॉर्ड किए गए बदलाव कर सकता है. साथ ही, ऑडियो को <audio> एलिमेंट में सेव कर सकता है या उस पर ऑडियो भेज सकता है.
आपने जो सीखा है उसकी जांच करें
ऑडियो और वीडियो के बारे में अपनी जानकारी की जांच करें.
<track> एलिमेंट का इस्तेमाल किस लिए किया जाता है?
poster एट्रिब्यूट किस चीज़ को कंट्रोल करता है?