दस्तावेज़ के लिए पिक्चर में पिक्चर (पीआईपी) एपीआई से पहले, पिक्चर में पिक्चर विंडो में सिर्फ़ एचटीएमएल <video> एलिमेंट डाला जा सकता था. इस नए एपीआई की मदद से, हमेशा-शीर्ष पर रहने वाली विंडो खोली जा सकती है. इसमें किसी भी तरह का एचटीएमएल कॉन्टेंट डाला जा सकता है. यह सुविधा, डेस्कटॉप पर Chrome 111 से ऑरिजिन ट्रायल के तौर पर उपलब्ध है.
नया एपीआई, <video> के लिए मौजूदा पिक्चर-इन-पिक्चर एपीआई से ज़्यादा सुविधाएं देता है. उदाहरण के लिए, उपयोगकर्ता के 'पिक्चर में पिक्चर' वीडियो प्लेयर के अनुभव को बेहतर बनाने के लिए, उपयोगकर्ताओं को कस्टम कंट्रोल और इनपुट (जैसे, कैप्शन, प्लेलिस्ट, टाइम स्क्रबर, वीडियो को पसंद और नापसंद करना) दिए जा सकते हैं.
'पिक्चर में पिक्चर' मोड में पूरे दस्तावेज़ को देखने की सुविधा की मदद से, वीडियो कॉन्फ़्रेंसिंग वाले वेब ऐप्लिकेशन, एक से ज़्यादा वीडियो स्ट्रीम को एक ही 'पिक्चर में पिक्चर' विंडो में जोड़ सकते हैं. इसके लिए, उन्हें कैनवस हैक का इस्तेमाल करने की ज़रूरत नहीं पड़ती. होस्ट, उपयोगकर्ताओं को मैसेज भेजने, किसी दूसरे उपयोगकर्ता को म्यूट करने या हाथ ऊपर करने जैसे कस्टम कंट्रोल भी दे सकता है.
नीचे दिए गए कोड स्निपेट में, कस्टम वीडियो प्लेयर के लिए पिक्चर में पिक्चर मोड को टॉगल करने का तरीका बताया गया है.
async function togglePictureInPicture() {
// Close Picture-in-Picture window if any.
if (documentPictureInPicture.window) {
documentPictureInPicture.window.close();
return;
}
// Open a Picture-in-Picture window.
const pipWindow = await documentPictureInPicture.requestWindow({
initialAspectRatio: 640 / 360,
copyStyleSheets: true,
});
// Move video to the Picture-in-Picture window.
const video = document.querySelector("#video");
pipWindow.document.body.append(video);
// Listen for the PiP closing event to move the video back.
pipWindow.addEventListener("unload", (event) => {
const videoContainer = document.querySelector("#videoContainer");
const pipVideo = event.target.querySelector("#video");
videoContainer.append(pipVideo);
});
}
ज़्यादा जानकारी के लिए <video> ही नहीं, बल्कि किसी भी एलिमेंट के लिए पिक्चर में पिक्चर देखें.
इस चरण में डेवलपर का सुझाव/शिकायत/राय काफ़ी अहम होती है. इसलिए, कृपया सुझावों और सवालों के साथ GitHub पर समस्याएं दर्ज करें.