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

Jad Joubran

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

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

यह एपीआई, <video> के लिए Picture-in-Picture API पर आधारित है. इसकी मदद से, 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 के लिए दस्तावेज़ देखें.