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

François Beaufort

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

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

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

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

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

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

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

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

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

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

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

इंटरफ़ेस

प्रॉपर्टी

documentPictureInPicture.window

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

तरीके

documentPictureInPicture.requestWindow(options)

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

width

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

height

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

disallowReturnToOpener

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

इवेंट

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

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

मूल विंडो से सभी सीएसएस स्टाइल शीट को कॉपी करने के लिए, दस्तावेज़ में साफ़ तौर पर लिंक किए गए या एम्बेड किए गए 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 प्लेयर

आप दस्तावेज़ पिक्चर में पिक्चर एपीआई VideoJS प्लेयर डेमो के साथ खेल सकते हैं. सोर्स कोड को देखना न भूलें.

पोमोडोरो

Tomodoro, एक पोमोडोरो वेब ऐप्लिकेशन है. यह उपलब्ध होने पर, Document पिक्चर-इन-पिक्चर एपीआई का भी फ़ायदा ले रहा है (GitHub पुल अनुरोध देखें).

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

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

काम के लिंक

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

स्वीकार की गई

जेकब ओवेन्स की हीरो इमेज.