दस्तावेज़ के लिए पिक्चर में पिक्चर (पीआईपी) एपीआई की मदद से, हमेशा-टॉप पर रहने वाली विंडो खोली जा सकती है. इसमें किसी भी तरह का एचटीएमएल कॉन्टेंट डाला जा सकता है. यह <video> के लिए पिक्चर में पिक्चर वाले मौजूदा एपीआई को बढ़ाता है. इससे सिर्फ़ एचटीएमएल <video> एलिमेंट को पिक्चर में पिक्चर वाली विंडो में डाला जा सकता है.
Document पिक्चर में पिक्चर एपीआई में पिक्चर में पिक्चर विंडो, window.open() के ज़रिए खोली गई एक ही ऑरिजिन वाली खाली विंडो की तरह होती है. हालांकि, इसमें कुछ अंतर हैं:
- पिक्चर में पिक्चर विंडो, अन्य विंडो के सबसे ऊपर फ़्लोट करती है.
- पिक्चर में पिक्चर विंडो, ओपनिंग विंडो से कभी बड़ी नहीं होती.
- पिक्चर में पिक्चर विंडो पर नेविगेट नहीं किया जा सकता.
- वेबसाइट, पिक्चर में पिक्चर विंडो की जगह सेट नहीं कर सकती.
मौजूदा स्थिति
| चरण | स्थिति |
|---|---|
| 1. एक्सप्लेनर वीडियो बनाना | पूरा हुआ |
| 2. स्पेसिफ़िकेशन का शुरुआती ड्राफ़्ट बनाना | प्रोसेस जारी है |
| 3. सुझाव/राय इकट्ठा करना और डिज़ाइन में बदलाव करना | प्रोसेस जारी है |
| 4. ऑरिजिन ट्रायल | पूरा हो गया |
| 5. लॉन्च करें | पूरा हुआ (डेस्कटॉप) |
उपयोग के उदाहरण
कस्टम वीडियो प्लेयर
कोई वेबसाइट, <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 पर समस्याओं को दर्ज करें, सुझावों और सवालों के साथ.