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

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

<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 वीडियो और वर्बिस ऑडियो होता है. कोडेक को समझना भी ज़्यादा मुश्किल हो सकता है, जैसे कि <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a"> जिससे पता चलता है कि MP4 एन्कोडिंग, ऐडवांस वीडियो कोडिंग मेन प्रोफ़ाइल लेवल 4.2 है. इस सिंटैक्स के बारे में समझाने के लिए इस लेसन में बताया गया है. जेक आर्चिबाल्ड ने एक पोस्ट में बताया है कि किसी वीडियो का कोडेक पैरामीटर कैसे तय किया जाता है अगर आपको इस बारे में ज़्यादा जानना है.

किसी वीडियो को दिखाते समय, डिफ़ॉल्ट रूप से, वीडियो का पहला फ़्रेम उपलब्ध होने पर उसे स्टिल शॉट के तौर पर दिखाया जाता है. इसे कंट्रोल किया जा सकता है. वीडियो डाउनलोड होने के दौरान, 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.

डायलॉग को लेख में बदलने और अनुवाद करने के लिए, 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>

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

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

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

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