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

François Beaufort

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

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

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

स्थिति

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

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

कस्टम वीडियो प्लेयर

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

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

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

उत्पादकता

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

इंटरफ़ेस

प्रॉपर्टी

documentPictureInPicture.window

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

तरीके

documentPictureInPicture.requestWindow(options)

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

width

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

height

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

disallowReturnToOpener

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

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() को कॉल करता है. इससे, खाली पिक्चर-इन-पिक्चर विंडो खुल जाती है. यह प्रॉमिस, Picture-in-Picture विंडो के 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 विकल्पों को PiP विंडो के सही साइज़ पर सेट करें. अगर विकल्प की वैल्यू बहुत ज़्यादा या बहुत कम है, तो 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);
});

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

अगर आपको Picture-in-Picture विंडो में मौजूद उस बटन को छिपाना है जिसकी मदद से उपयोगकर्ता, ओपनर टैब पर वापस जा सकता है, तो 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,
  });
});

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

अगर आपको पिछली 'पिक्चर में पिक्चर' विंडो की पोज़िशन या साइज़ का फिर से इस्तेमाल नहीं करना है, तो 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,
  });
});

स्टाइल शीट को PiP में कॉपी करना

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

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);
});

पीआईपी विंडो बंद होने पर हैंडल करें

जब Picture-in-Picture विंडो बंद हो जाती है, तब इसकी जानकारी पाने के लिए, विंडो "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();

यह कुकी, वेबसाइट के PiP मोड में जाने पर काम करती है

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

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

पीआईपी विंडो में मौजूद एलिमेंट ऐक्सेस करता है

documentPictureInPicture.requestWindow() से मिले ऑब्जेक्ट या documentPictureInPicture.window की मदद से, Picture-in-Picture विंडो में मौजूद एलिमेंट ऐक्सेस करें.

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

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

बटन और कंट्रोल बनाएं और उपयोगकर्ता के इनपुट इवेंट (जैसे कि "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 डिसप्ले मोड का इस्तेमाल करके, सीएसएस के ऐसे नियम लिखें जो सिर्फ़ तब लागू हों, जब वेब ऐप्लिकेशन का कुछ हिस्सा Picture-in-Picture मोड में दिखाया जा रहा हो.

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

सुविधा का पता लगाना

यह देखने के लिए कि Document Picture-in-Picture API काम करता है या नहीं, इसका इस्तेमाल करें:

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

डेमो

• VideoJS प्लेयर: Document Picture-in-Picture API VideoJS प्लेयर डेमो का इस्तेमाल करें.
• Tomodoro, एक पोमोडोरो वेब ऐप्लिकेशन है. यह Document Picture-in-Picture API का इस्तेमाल करता है. उनका GitHub पुल अनुरोध देखें.

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

सुझावों और सवालों के साथ, GitHub पर समस्याएं सबमिट करें.

काम के लिंक

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