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

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
• टैग की समीक्षा
• प्रयोग करने का इंटेंट
• शिप करने का इंटेंट