इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

Jad Joubran

पब्लिश होने की तारीख: 4 मार्च, 2025

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

यह एपीआई, <video> के लिए पिक्चर में पिक्चर (पीआईपी) एपीआई के आधार पर बनाया गया है. इसकी मदद से, पीआईपी विंडो में वीडियो देखा जा सकता है.

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

ब्राउज़र के साथ काम करना और प्रगतिशील बेहतर बनाना

Browser Support

Source

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

हालांकि, इस वजह से आपको धीरे-धीरे बेहतर बनाने या धीरे-धीरे खराब होने की सुविधा के साथ इसका इस्तेमाल करने से नहीं रोकना चाहिए.

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

Document PiP API की मदद से, सीखने वाले के अनुभव को बेहतर बनाना

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

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

छात्र या छात्रा के तौर पर, हो सकता है कि आप कभी-कभी ब्राउज़र की झलक वाली विंडो को बड़ा करना चाहें. यह दस्तावेज़ के लिए पिक्चर में पिक्चर एपीआई की सुविधा जोड़ने का बेहतरीन मौका है.

इसे लागू करने के लिए, सबसे पहले यह देखें कि यह सुविधा ब्राउज़र पर काम करती है या नहीं:

const isPipSupported = "documentPictureInPicture" in window;

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

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;

सीएसएस कोड से जुड़ी समस्याओं के लिए, आपको सीएसएस को भी सिंक करना होगा.

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

फ़ॉलबैक

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

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

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

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

जैसा कि आप देख सकते हैं, प्रगतिशील बेहतर बनाने या बेहतर बनाने की सुविधा के साथ इस्तेमाल करने पर, दस्तावेज़ के लिए पिक्चर में पिक्चर (पीआईपी) एपीआई, आपके वेब ऐप्लिकेशन के लिए नए और दिलचस्प इस्तेमाल के उदाहरणों को अनलॉक कर सकता है.

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

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