दस्तावेज़ के लिए पिक्चर में पिक्चर (पीआईपी) एपीआई से पहले, पिक्चर में पिक्चर विंडो में सिर्फ़ एचटीएमएल <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 पर समस्याएं दर्ज करें.