ऑडियो और वीडियो

आपने इमेज मॉड्यूल में सीखा कि एचटीएमएल की मदद से, किसी वेब पेज में मीडिया एम्बेड किया जा सकता है. इस सेक्शन में, हम ऑडियो और वीडियो फ़ाइलों के बारे में जानेंगे. इनमें उन्हें एम्बेड करने का तरीका, उपयोगकर्ता कंट्रोल, वीडियो के लिए स्टैटिक इमेज प्लेसहोल्डर उपलब्ध कराना, और सबसे सही तरीके शामिल हैं. जैसे, ऑडियो और वीडियो फ़ाइलों को ऐक्सेस किया जा सकता है.

<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 एन्कोडिंग, Advanced Video Coding Main Profile Level 4.2 है. इस सिंटैक्स के बारे में बताना, इस लेसन के दायरे से बाहर है. ज़्यादा जानकारी के लिए, Jake Archibald का यह पोस्ट पढ़ें: AV1 वीडियो के लिए कोडेक पैरामीटर का पता कैसे लगाएं.

वीडियो दिखाते समय, डिफ़ॉल्ट रूप से वीडियो का पहला फ़्रेम, स्टिल शॉट के तौर पर दिखाया जाता है. इसे कंट्रोल किया जा सकता है. poster एट्रिब्यूट की मदद से, वीडियो डाउनलोड होने के दौरान और वीडियो चलने तक इमेज का सोर्स दिखाया जा सकता है. अगर वीडियो चल रहा है और उसे बाद में रोक दिया जाता है, तो पोस्टर फिर से नहीं दिखता.

अपने वीडियो का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) तय करना न भूलें. ऐसा इसलिए, क्योंकि वीडियो लोड होने पर, पोस्टर और वीडियो के साइज़ में अंतर होने की वजह से, लेआउट में बदलाव होगा और उसे फिर से रेंडर करना पड़ेगा.

बूलियन 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.

डायलॉग के ट्रांसक्रिप्शन और अनुवादों के लिए, subtitles एट्रिब्यूट के साथ srclang एट्रिब्यूट शामिल करें. हर label एट्रिब्यूट की वैल्यू, उपयोगकर्ता को एक विकल्प के तौर पर दिखती है. चुने गए वीटीटी विकल्प का कॉन्टेंट, वीडियो पर दिखता है. उपशीर्षकों के दिखने के तरीके को स्टाइल करने के लिए, ::cue/ ::cue() को टारगेट किया जा सकता है.

kind="caption" वैल्यू का इस्तेमाल, बोले जा रहे शब्दों को टेक्स्ट में बदलने और अनुवाद करने के लिए किया जाना चाहिए. इसमें साउंड इफ़ेक्ट और अन्य काम की ऑडियो जानकारी शामिल होती है. यह सुविधा सिर्फ़ दर्शकों के लिए नहीं है. ऐसा हो सकता है कि किसी उपयोगकर्ता को अपने हेडफ़ोन न मिल रहे हों. इसलिए, उसने कैप्शन चालू किए हों. इसके अलावा, ऐसा भी हो सकता है कि उन्हें अपने पसंदीदा पॉडकास्ट के कुछ मुख्य पॉइंट समझ न आए हों. इसलिए, वे ट्रांसक्रिप्ट पढ़कर यह पक्का करना चाहते हैं कि उन्हें सही जानकारी मिली है. ऑडियो और वीडियो कॉन्टेंट को ऐक्सेस करने के वैकल्पिक तरीके होना ज़रूरी भी है और सुविधाजनक भी.

kind="description" का इस्तेमाल, वीडियो में मौजूद विज़ुअल कॉन्टेंट के बारे में टेक्स्ट में जानकारी देने के लिए किया जाता है. यह जानकारी उन लोगों के लिए होती है जो वीडियो नहीं देख सकते. जैसे, Google Home या Alexa जैसे स्क्रीन के बिना काम करने वाले सिस्टम का इस्तेमाल करने वाले लोग या दृष्टिबाधित लोग.

WebVTT फ़ॉर्मैट का इस्तेमाल करके, कैप्शन और सबटाइटल उपलब्ध कराने से, सुनने की समस्या वाले लोगों को वीडियो ऐक्सेस करने में मदद मिलती है. श्रवण बाधित होना उपयोगकर्ता के शोरगुल वाले वातावरण में रहने, खराब स्पीकर या टूटे हुए हेडफ़ोन के कारण हो सकता है, या व्यक्ति को सुनने में कमी हो सकती है या वह बहरा हो सकता है। यह पक्का करने से कि आपका कॉन्टेंट ऐक्सेस किया जा सकता है, आपको लगता है कि इससे ज़्यादा लोगों को मदद मिलती है. हालांकि, इससे सभी को मदद मिलती है.

बैकग्राउंड वीडियो के बारे में ध्यान रखने वाली बातें

आपकी मार्केटिंग या डिज़ाइन टीम, आपकी साइट पर बैकग्राउंड वीडियो शामिल करना चाहती हो. आम तौर पर, इसका मतलब यह है कि उन्हें ऐसा वीडियो चाहिए जो म्यूट हो, अपने-आप चलता हो, लूप में चलता हो, और जिसमें कोई कंट्रोल न हो. एचटीएमएल कुछ ऐसा दिख सकता है:

<video playsinline 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 का इस्तेमाल करके कस्टम मीडिया कंट्रोल जोड़ें और controls एट्रिब्यूट हटाएं. उदाहरण के लिए, <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 काम न करे. बदलाव करने वाला बटन इंस्टैंटिएट होने के बाद ही, controls एट्रिब्यूट को हटाएं.

document.querySelector('[aria-controls]').removeAttribute('controls');

जब उपयोगकर्ता कंट्रोल ऐक्सेस न कर पाएं, तब हमेशा बाहरी कंट्रोल शामिल करें. जैसे, बैकग्राउंड में चलने वाले ऐसे वीडियो जिनके कंट्रोल साइट के कॉन्टेंट के पीछे छिपे होते हैं. मीडिया ऐक्सेस करने से जुड़ी ज़रूरी शर्तों के बारे में बुनियादी जानकारी होना ज़रूरी है. इससे अलग-अलग तरह की ज़रूरतों वाले लोगों को मीडिया ऐक्सेस करने में मदद मिलती है. जैसे, सुनने और देखने में परेशानी होने वाले लाखों लोगों को. हमने अभी-अभी HTMLMediaElement के बारे में बताया है. यह कई प्रॉपर्टी, तरीके, और इवेंट उपलब्ध कराता है. ये सभी HTMLVideoElement और HTMLAudioElement से इनहेरिट किए जाते हैं. HTMLMediaElement अपनी कुछ प्रॉपर्टी, तरीके, और इवेंट भी जोड़ता है. कई अन्य मीडिया एपीआई भी उपलब्ध हैं. इनमें TextTrack API भी शामिल है. मीडिया कैप्चर और स्ट्रीम और MediaDevices एपीआई का इस्तेमाल करके, उपयोगकर्ता के माइक्रोफ़ोन से ऑडियो रिकॉर्ड किया जा सकता है या उपयोगकर्ता की स्क्रीन रिकॉर्ड की जा सकती है. Web Audio API की मदद से, लाइव और पहले से रिकॉर्ड किए गए ऑडियो को स्ट्रीम किया जा सकता है. साथ ही, उसे सेव किया जा सकता है या <audio> एलिमेंट को भेजा जा सकता है.

देखें कि आपको कितना समझ आया

ऑडियो और वीडियो के बारे में अपनी जानकारी को परखें.