दस्तावेज़ के लिए पिक्चर में पिक्चर मोड वाले एपीआई की मदद से, दिलचस्प इस्तेमाल के उदाहरण देखें

Jad Joubran

पब्लिश किया गया: 4 मार्च, 2025

Document Picture-in-Picture API (Document PiP API) की मदद से, वेब ऐप्लिकेशन एक फ़्लोटिंग विंडो (पिक्चर-इन-पिक्चर विंडो) खोल सकते हैं. यह विंडो हमेशा सबसे ऊपर दिखती है और इसमें कोई भी एचटीएमएल कॉन्टेंट दिखाया जा सकता है.

यह एपीआई, Picture-in-Picture API for <video> पर आधारित है. इसकी मदद से, वीडियो को PiP विंडो में भी देखा जा सकता है.

Document PiP API में कोई भी एचटीएमएल कॉन्टेंट दिखाया जा सकता है. इसलिए, इसका इस्तेमाल करके, इस्तेमाल के नए और दिलचस्प उदाहरणों को अनलॉक किया जा सकता है.

ब्राउज़र से जुड़ी सहायता और परतदार वृद्धि

यह लेख लिखते समय, Document Picture-in-Picture API की उपलब्धता सीमित है.

हालांकि, इससे आपको प्रोग्रेसिव एनहांसमेंट या ग्रेसफ़ुल डिग्रेडेशन के साथ इसका इस्तेमाल करने से नहीं रोकना चाहिए.

इस्तेमाल का कोई उदाहरण प्लान करते समय, पक्का करें कि इसे स्टैंडर्ड सुविधा के तौर पर नहीं, बल्कि परतदार वृद्धि के तौर पर माना जाए. इस लेख में, आपको ग्रेसफ़ुल डिग्रेडेशन का एक उदाहरण दिखेगा.

Document PiP API की मदद से, सीखने वाले व्यक्ति के उपयोगकर्ता अनुभव को बेहतर बनाना

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

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

कभी-कभी, छात्र या छात्रा ब्राउज़र प्रिव्यू विंडो को बड़ा करना चाह सकती है. यह Document Picture-in-Picture API के लिए सहायता जोड़ने का एक बेहतरीन मौका है.

इसे लागू करने के लिए, सबसे पहले ब्राउज़र की सहायता की जांच करें:

const isPipSupported = "documentPictureInPicture" in window;

अब इस वैरिएबल का इस्तेमाल, documentPictureInPicture के किसी भी कॉल को रैप करने या Document PiP पर निर्भर करने वाले किसी फ़ंक्शन से पहले से ही वापस आने के लिए किया जा सकता है. यहां दिया गया कोड, Document PiP की सहायता की जांच करता है. इसके बाद, Document PiP विंडो खोलता है.

async function initDocumentPip() {
  if (!isPipSupported) {
    return false;
  }

  const pipWindow = await documentPictureInPicture.requestWindow({
    width: window.innerWidth,
    height: window.innerHeight,
  });
}

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

अब तक, आपके पास एक खाली दस्तावेज़ है. अब आपको इसमें कॉन्टेंट जोड़ना होगा.

// htmlCode is the HTML code of the challenge
pipWindow.document.documentElement.innerHTML = htmlCode;

सीएसएस कोड वाली चुनौतियों के लिए, आपको सीएसएस को भी सिंक करना होगा.

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

फ़ॉलबैक

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

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

अलग-अलग ब्राउज़र में इस सुविधा को आज़माएं: https://learnhtmlcss.online/app.html?id=2096

टूलटिप में मौजूद छोटी-छोटी जानकारी पर ध्यान देना न भूलें. जब isPipSupported की वैल्यू true होती है, तब बड़ा/छोटा करने वाले बटन की टूलटिप, पिक्चर-इन-पिक्चर मोड में जाएं और पिक्चर-इन-पिक्चर मोड से बाहर निकलें के बीच टॉगल होती है. वहीं, जब isPipSupported की वैल्यू false होती है, तब फ़ॉलबैक की सुविधा को बड़ा करें और छोटा करें के तौर पर दिखाया जाता है.

जैसा कि आपने देखा, Document Picture-in-Picture API की मदद से, वेब ऐप्लिकेशन के लिए इस्तेमाल के नए और दिलचस्प उदाहरणों को अनलॉक किया जा सकता है. इसके लिए, प्रोग्रेसिव एनहांसमेंट या ग्रेसफ़ुल डिग्रेडेशन का इस्तेमाल किया जा सकता है.

ब्राउज़र की सीमित सहायता की वजह से, खुद को सीमित न करें. साथ ही, फ़ॉलबैक के लिए इस्तेमाल का कोई अच्छा उदाहरण देना न भूलें.

इस एपीआई के अलग-अलग उदाहरण और इस्तेमाल के उदाहरण देखने के लिए, Document PiP का दस्तावेज़ देखें.