किसी भी एलिमेंट के लिए पिक्चर में पिक्चर की सुविधा, सिर्फ़ <वीडियो>

François Beaufort

डॉक्यूमेंट पिक्चर में पिक्चर एपीआई की मदद से, हमेशा चालू रहने वाली विंडो को खोला जा सकता है. इसमें आर्बिट्रेरी एचटीएमएल कॉन्टेंट की मदद से अपने-आप जानकारी भरी जा सकती है. यह <video> के लिए पिक्चर में पिक्चर एपीआई को बढ़ाता है, जो सिर्फ़ एचटीएमएल <video> एलिमेंट को पिक्चर में पिक्चर विंडो में रखने की अनुमति देता है.

दस्तावेज़ की पिक्चर में पिक्चर विंडो एपीआई में मौजूद पिक्चर में पिक्चर विंडो, window.open() के ज़रिए खोली गई, एक ही ऑरिजिन वाली खाली विंडो जैसी होती है. हालांकि, इनमें कुछ अंतर होते हैं:

• पिक्चर में पिक्चर विंडो, अन्य विंडो के ऊपर फ़्लोट करती है.
• पिक्चर में पिक्चर विंडो, ओपनिंग विंडो से कभी बड़ी नहीं होती.
• पिक्चर में पिक्चर विंडो पर नेविगेट नहीं किया जा सकता.
• वेबसाइट, पिक्चर में पिक्चर विंडो की जगह सेट नहीं कर सकती.

मौजूदा स्थिति

उपयोग के उदाहरण

पसंद के मुताबिक वीडियो प्लेयर

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

वीडियो कॉन्फ़्रेंसिंग ऐप्लिकेशन

आम तौर पर, वीडियो कॉन्फ़्रेंसिंग सेशन के दौरान उपयोगकर्ता कई वजहों से ब्राउज़र टैब को छोड़ देते हैं. जैसे, कॉल में किसी दूसरे टैब को प्रज़ेंट करना या मल्टीटास्किंग करना. हालांकि, वे कॉल देखना जारी रखना चाहते हैं. इसलिए, पिक्चर में पिक्चर सुविधा का इस्तेमाल करने का यह मुख्य उदाहरण है. एक बार फिर, <video> के लिए पिक्चर में पिक्चर एपीआई की मदद से वीडियो कॉन्फ़्रेंसिंग की वेबसाइट का मौजूदा वर्शन, सीमित स्टाइल और इनपुट के हिसाब से उपलब्ध है. 'पिक्चर में पिक्चर' मोड में पूरे दस्तावेज़ को देखने की सुविधा की मदद से, वेबसाइट कई वीडियो स्ट्रीम को आसानी से एक पीआईपी विंडो में जोड़ सकती है. इसके लिए, उसे कैनवस हैक पर निर्भर नहीं रहना पड़ता. साथ ही, यह उपयोगकर्ताओं को मैसेज भेजने, किसी दूसरे उपयोगकर्ता को म्यूट करने या हाथ ऊपर करने जैसे कस्टम कंट्रोल भी उपलब्ध कराती है.

प्रॉडक्टिविटी

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

इंटरफ़ेस

प्रॉपर्टी

documentPictureInPicture.window

अगर कोई पिक्चर में पिक्चर विंडो मौजूद है, तो उसे दिखाता है. ऐसा न होने पर, null दिखाता है.

तरीके

documentPictureInPicture.requestWindow(options)

यह एक प्रॉमिस दिखाता है, जो पिक्चर में पिक्चर विंडो खुलने पर रिज़ॉल्व हो जाता है. अगर प्रॉमिस को उपयोगकर्ता के जेस्चर के बिना कॉल किया जाता है, तो प्रॉमिस अस्वीकार कर दिया जाता है. options शब्दकोश में ये वैकल्पिक सदस्य शामिल हैं:

width

पिक्चर में पिक्चर विंडो की शुरुआती चौड़ाई सेट करता है.

height

पिक्चर में पिक्चर विंडो की शुरुआती ऊंचाई सेट करता है.

disallowReturnToOpener

अगर यह सही है, तो पिक्चर में पिक्चर विंडो में "टैब पर वापस जाएं" बटन छिपा देता है. यह डिफ़ॉल्ट रूप से 'गलत' पर सेट होता है.

preferInitialWindowPlacement

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

इवेंट

documentPictureInPicture.onenter

पिक्चर में पिक्चर विंडो खुलने पर, documentPictureInPicture पर ट्रिगर होता है.

उदाहरण

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

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

पिक्चर में पिक्चर विंडो खोलना

जब कोई उपयोगकर्ता खाली पिक्चर-इन-पिक्चर विंडो खोलने के लिए बटन पर क्लिक करता है, तो यह JavaScript documentPictureInPicture.requestWindow() को कॉल करता है. रिटर्न किया गया प्रॉमिस, पिक्चर में पिक्चर विंडो के JavaScript ऑब्जेक्ट के साथ रिज़ॉल्व होता है. वीडियो प्लेयर को append() का इस्तेमाल करके उस विंडो पर ले जाया गया.

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

पिक्चर में पिक्चर विंडो का साइज़ सेट करना

'पिक्चर में पिक्चर' विंडो का साइज़ सेट करने के लिए, documentPictureInPicture.requestWindow() के width और height विकल्पों को 'पिक्चर में पिक्चर' विंडो के पसंदीदा साइज़ पर सेट करें. अगर विकल्प की वैल्यू, उपयोगकर्ता के हिसाब से विंडो के साइज़ में फ़िट होने के लिए बहुत बड़ी या बहुत छोटी हैं, तो Chrome उन्हें क्लैंप कर सकता है.

pipButton.addEventListener("click", async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window whose size is
  // the same as the player's.
  const pipWindow = await documentPictureInPicture.requestWindow({
    width: player.clientWidth,
    height: player.clientHeight,
  });

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

पिक्चर में पिक्चर विंडो के "टैब पर वापस जाएं" बटन को छिपाना

पिक्चर में पिक्चर विंडो में उस बटन को छिपाने के लिए जो उपयोगकर्ता को ओपनर टैब पर वापस जाने की अनुमति देती है, documentPictureInPicture.requestWindow() के disallowReturnToOpener विकल्प को true पर सेट करें.

pipButton.addEventListener("click", async () => {
  // Open a Picture-in-Picture window which hides the "back to tab" button.
  const pipWindow = await documentPictureInPicture.requestWindow({
    disallowReturnToOpener: true,
  });
});

पिक्चर में पिक्चर विंडो को उसकी डिफ़ॉल्ट पोज़िशन और साइज़ में खोलें

पिक्चर में पिक्चर विंडो की पिछली पोज़िशन या साइज़ का फिर से इस्तेमाल न करने के लिए, documentPictureInPicture.requestWindow() के preferInitialWindowPlacement विकल्प को true पर सेट करें.

pipButton.addEventListener("click", async () => {
  // Open a Picture-in-Picture window in its default position / size.
  const pipWindow = await documentPictureInPicture.requestWindow({
    preferInitialWindowPlacement: true,
  });
});

स्टाइल शीट को 'पिक्चर में पिक्चर' विंडो में कॉपी करना

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

pipButton.addEventListener("click", async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Copy style sheets over from the initial document
  // so that the player looks the same.
  [...document.styleSheets].forEach((styleSheet) => {
    try {
      const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');
      const style = document.createElement('style');

      style.textContent = cssRules;
      pipWindow.document.head.appendChild(style);
    } catch (e) {
      const link = document.createElement('link');

      link.rel = 'stylesheet';
      link.type = styleSheet.type;
      link.media = styleSheet.media;
      link.href = styleSheet.href;
      pipWindow.document.head.appendChild(link);
    }
  });

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

पिक्चर में पिक्चर विंडो बंद होने पर होने वाली कार्रवाइयां

पिक्चर में पिक्चर विंडो के बंद होने की जानकारी पाने के लिए, विंडो "pagehide" इवेंट सुनें. ऐसा तब हो सकता है, जब वेबसाइट ने विंडो बंद की हो या उपयोगकर्ता ने उसे मैन्युअल तरीके से बंद कर दिया हो. इवेंट हैंडलर, पिक्चर में पिक्चर विंडो से एलिमेंट वापस पाने के लिए एक अच्छी जगह है, जैसा कि यहां दिखाया गया है.

pipButton.addEventListener("click", async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);

  // Move the player back when the Picture-in-Picture window closes.
  pipWindow.addEventListener("pagehide", (event) => {
    const playerContainer = document.querySelector("#playerContainer");
    const pipPlayer = event.target.querySelector("#player");
    playerContainer.append(pipPlayer);
  });
});

close() तरीके का इस्तेमाल करके, प्रोग्राम के हिसाब से पिक्चर में पिक्चर विंडो बंद करें.

// Close the Picture-in-Picture window programmatically. 
// The "pagehide" event will fire normally.
pipWindow.close();

वेबसाइट के 'पिक्चर में पिक्चर' मोड में जाने पर सुनें

पिक्चर में पिक्चर मोड की विंडो खुलने का पता लगाने के लिए, documentPictureInPicture पर "enter" इवेंट को सुनें. इवेंट में पिक्चर में पिक्चर विंडो को ऐक्सेस करने के लिए, window ऑब्जेक्ट शामिल होता है.

documentPictureInPicture.addEventListener("enter", (event) => {
  const pipWindow = event.window;
});

पिक्चर में पिक्चर विंडो में एलिमेंट ऐक्सेस करना

पिक्चर में पिक्चर विंडो में मौजूद एलिमेंट को, documentPictureInPicture.requestWindow() के लौटाए गए ऑब्जेक्ट से या documentPictureInPicture.window की मदद से ऐक्सेस किया जा सकता है, जैसा कि नीचे दिखाया गया है.

const pipWindow = documentPictureInPicture.window;
if (pipWindow) {
  // Mute video playing in the Picture-in-Picture window.
  const pipVideo = pipWindow.document.querySelector("#video");
  pipVideo.muted = true;
}

पिक्चर में पिक्चर विंडो से इवेंट मैनेज करना

बटन और कंट्रोल बनाएं और उपयोगकर्ता के इनपुट इवेंट, जैसे कि "click" का जवाब दें. यह काम, JavaScript में सामान्य तरीके से किया जाता है.

// Add a "mute" button to the Picture-in-Picture window.
const pipMuteButton = pipWindow.document.createElement("button");
pipMuteButton.textContent = "Mute";
pipMuteButton.addEventListener("click", () => { 
  const pipVideo = pipWindow.document.querySelector("#video");
  pipVideo.muted = true;
});
pipWindow.document.body.append(pipMuteButton);

पिक्चर में पिक्चर विंडो का साइज़ बदलना

'पिक्चर में पिक्चर' विंडो का साइज़ बदलने के लिए, विंडो के resizeBy() और resizeTo() बटन का इस्तेमाल करें. दोनों तरीकों के लिए, उपयोगकर्ता के जेस्चर की ज़रूरत होती है.

const resizeButton = pipWindow.document.createElement('button');
resizeButton.textContent = 'Resize';
resizeButton.addEventListener('click', () => {
  // Expand the Picture-in-Picture window's width by 20px and height by 30px.
  pipWindow.resizeBy(20, 30);
});
pipWindow.document.body.append(resizeButton);

ओपनर विंडो पर फ़ोकस करना

पिक्चर में पिक्चर विंडो से, ओपनर विंडो पर फ़ोकस करने के लिए, focus() विंडो के तरीके का इस्तेमाल करें. इस तरीके के लिए, उपयोगकर्ता के जेस्चर की ज़रूरत होती है.

const returnToTabButton = pipWindow.document.createElement("button");
returnToTabButton.textContent = "Return to opener tab";
returnToTabButton.addEventListener("click", () => {
  window.focus();
});
pipWindow.document.body.append(returnToTabButton);

सीएसएस 'पिक्चर में पिक्चर' डिसप्ले मोड

सीएसएस picture-in-picture डिसप्ले मोड का इस्तेमाल करके, सीएसएस के खास नियम लिखें. ये नियम सिर्फ़ तब लागू होते हैं, जब वेब ऐप्लिकेशन का कुछ हिस्सा पिक्चर में पिक्चर मोड में दिखाया जाता है.

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

फ़ीचर का पता लगाना

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

if ('documentPictureInPicture' in window) {
  // The Document Picture-in-Picture API is supported.
}

डेमो

VideoJS प्लेयर

Document Picture-in-Picture API के VideoJS प्लेयर डेमो को आज़माया जा सकता है. सोर्स कोड को ज़रूर देखें.

पोमोडोरो

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

सुझाव/राय दें या शिकायत करें

GitHub पर समस्याओं को दर्ज करें, सुझावों और सवालों के साथ.

काम के लिंक

• सार्वजनिक तौर पर जानकारी देने की सुविधा
• WICG की खास बातें
• Chromium ट्रैकिंग बग
• ChromeStatus.com एंट्री
• Blink कॉम्पोनेंट: Blink>Media>PictureInPicture
• TAG की समीक्षा
• प्रयोग करने का इंटेंट
• शिप करने की इच्छा