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

François Beaufort

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

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

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

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

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

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

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

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

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

उत्पादकता

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

इंटरफ़ेस

प्रॉपर्टी

documentPictureInPicture.window

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

तरीके

documentPictureInPicture.requestWindow(options)

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

width

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

height

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

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

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

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

Pomodoro

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

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

सुझावों और सवालों के साथ, GitHub पर समस्याएं फ़ाइल करें.

काम के लिंक

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