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