डॉक्यूमेंट पिक्चर में पिक्चर एपीआई से पहले, एचटीएमएल <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 पर समस्याएं दर्ज करें.
जेकब ओवेन्स की हीरो इमेज.