इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

François Beaufort

ब्राउज़र सहायता

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

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

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

एक पिक्चर में पिक्चर विंडो, जिस पर सिंटेल का ट्रेलर वीडियो चल रहा है. — दस्तावेज़ पिक्चर में पिक्चर एपीआई (डेमो) की मदद से बनाई गई पिक्चर-इन-पिक्चर विंडो.

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

चरण	स्थिति
1. जानकारी बनाएं	पूरा हुआ
2. खास जानकारी का शुरुआती ड्राफ़्ट बनाएं	प्रोसेस जारी है
3. लोगों की राय जानें और डिज़ाइन को बेहतर बनाएं	प्रोसेस जारी है
4. ऑरिजिन ट्रायल	पूरा हुआ
5. लॉन्च करना	पूरा हुआ (डेस्कटॉप)

इस्तेमाल के उदाहरण

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

कोई वेबसाइट मौजूदा <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);
});

ध्यान दें: copyStyleSheets विकल्प, स्पेसिफ़िकेशन के पिछले वर्शन में इस्तेमाल किया जा सकता था. अब ऐसा नहीं है.

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

पिक्चर में पिक्चर विंडो बंद होने की जानकारी पाने के लिए, विंडो "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 प्लेयर

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

पोमोडोरो

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

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

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

काम के कुछ लिंक

स्वीकार हैं

हीरो इमेज, जेकब ओवेन्स ने तैयार की है.