Picture-in-Picture (PiP) क्या है?

Picture-in-Picture एक ब्राउज़र फीचर है जो आपको किसी वीडियो को वर्तमान टैब से बाहर निकालकर एक छोटी फ्लोटिंग विंडो में रखने देता है जो आपकी स्क्रीन पर सब कुछ के ऊपर रहती है। आप इसे कहीं भी ले जा सकते हैं, इसका आकार बदल सकते हैं, और अन्य टैब ब्राउज़ करते हुए, दस्तावेज़ लिखते हुए, या अपने कंप्यूटर पर कुछ और करते हुए देखते रह सकते हैं — वीडियो पूरे समय दिखाई देता रहता है।

PiP एक मानकीकृत web API के माध्यम से सभी आधुनिक डेस्कटॉप ब्राउज़र (Chrome, Edge, Firefox, Safari) में बनाया गया है। इसके लिए किसी प्लगइन या एक्सटेंशन की आवश्यकता नहीं है, और फ्लोटिंग विंडो पूरी तरह से ऑपरेटिंग सिस्टम द्वारा प्रबंधित होती है, इसलिए यह तब भी बनी रहती है जब आप एप्लिकेशन स्विच करते हैं।

टूल विवरण

यह टूल किसी भी सीधे वीडियो URL को एक HTML5 प्लेयर में लोड करता है और आपको एक क्लिक के साथ इसे Picture-in-Picture मोड में लॉन्च करने देता है। एक सार्वजनिक रूप से सुलभ वीडियो फ़ाइल के लिए एक लिंक पेस्ट करें, इसे लोड करें, और "Picture-in-Picture लॉन्च करें" दबाएं ताकि वीडियो को एक फ्लोटिंग ओवरले विंडो में अलग किया जा सके।

समर्थित प्रारूप

कोई भी वीडियो प्रारूप जो आपके ब्राउज़र के नेटिव HTML5 प्लेयर को समर्थन करता है:

  • MP4 (H.264 / H.265) — सार्वभौमिक रूप से समर्थित
  • WebM (VP8 / VP9 / AV1) — Chrome, Firefox, Edge में समर्थित
  • OGG / OGV (Theora) — Firefox और Chrome में समर्थित
  • MOV — Safari में समर्थित; अन्य जगहों पर सीमित समर्थन
  • M4V — अधिकांश Chromium-आधारित ब्राउज़र और Safari में समर्थित

वीडियो फ़ाइल को HTTP/HTTPS पर परोसा जाना चाहिए और सर्वर को ब्राउज़र के लिए इसे लोड करने के लिए क्रॉस-ऑरिजिन अनुरोधों (CORS) की अनुमति देनी चाहिए।

यह कैसे काम करता है

  1. आप जो URL दर्ज करते हैं वह एक मानक HTML5 <video> तत्व के src के रूप में लोड होता है।
  2. जब आप "Picture-in-Picture लॉन्च करें" पर क्लिक करते हैं, तो ब्राउज़र उस तत्व पर नेटिव requestPictureInPicture() API को कॉल करता है।
  3. ब्राउज़र वीडियो को OS विंडो मैनेजर द्वारा प्रबंधित एक फ्लोटिंग विंडो में अलग करता है।
  4. "Picture-in-Picture से बाहर निकलें" पर क्लिक करना (या फ्लोटिंग विंडो पर क्लोज़ बटन) exitPictureInPicture() को कॉल करता है और वीडियो को प्लेयर में वापस लाता है।

विशेषताएं

  • ब्राउज़र से सीधे एक-क्लिक PiP लॉन्च और एक्जिट — कोई एक्सटेंशन की आवश्यकता नहीं
  • किसी भी सार्वजनिक रूप से सुलभ सीधे वीडियो URL के साथ काम करता है
  • 16:9 पहलू अनुपात प्लेयर पूर्ण नेटिव नियंत्रण के साथ (प्ले, पॉज़, सीक, वॉल्यूम, फुलस्क्रीन)
  • PiP में प्रवेश करने से पहले स्वचालित रूप से प्लेबैक शुरू करता है ताकि वीडियो फ्रीज़ न हो
  • पता लगाता है कि क्या PiP वर्तमान ब्राउज़र में असमर्थित है और एक स्पष्ट संदेश दिखाता है

उपयोग के मामले

  • एक कोड एडिटर या किसी अन्य ब्राउज़र टैब में अनुसरण करते हुए एक फ्लोटिंग विंडो में एक ट्यूटोरियल वीडियो देखें
  • अन्य एप्लिकेशन में काम करते समय एक लाइव स्ट्रीम या रिकॉर्ड किए गए वीडियो फीड की निगरानी करें
  • दस्तावेज़, स्प्रेडशीट, या डिज़ाइन फ़ाइलों को संपादित करते समय एक वीडियो संदर्भ दृश्यमान रखें

सीमाएं

  • वीडियो सर्वर को फ़ाइल को एक अलग ऑरिजिन से प्राप्त करने की अनुमति देनी चाहिए (CORS हेडर आवश्यक)। कई CDN और सीधी फ़ाइल होस्ट पहले से ही ऐसा करते हैं; कुछ नहीं करते।
  • PiP सभी ब्राउज़र में उपलब्ध नहीं है — विशेष रूप से कुछ मोबाइल ब्राउज़र और पुराने डेस्कटॉप संस्करण API को समर्थन नहीं करते।
  • स्ट्रीमिंग प्लेलिस्ट प्रारूप जैसे HLS (.m3u8) और DASH (.mpd) सीधे समर्थित नहीं हैं; केवल प्रगतिशील डाउनलोड URL काम करते हैं।

FAQ

वीडियो लोड करने में विफल क्यों होता है? वीडियो होस्ट करने वाला सर्वर Access-Control-Allow-Origin हेडर शामिल नहीं कर सकता है जो क्रॉस-ऑरिजिन लोडिंग की अनुमति देता है, या URL को प्रमाणीकरण की आवश्यकता हो सकती है। एक वीडियो फ़ाइल के लिए एक सीधा सार्वजनिक लिंक आजमाएं।

PiP बटन अक्षम क्यों है? आपको पहले एक URL दर्ज करके और "वीडियो लोड करें" पर क्लिक करके एक वीडियो लोड करना होगा। एक बार स्रोत सेट हो जाने के बाद बटन सक्रिय हो जाता है।

क्या यह मोबाइल पर काम करता है? Picture-in-Picture API के पास मोबाइल ब्राउज़र पर सीमित समर्थन है। iOS पर, Safari वीडियो के लिए PiP को समर्थन करता है लेकिन व्यवहार भिन्न हो सकता है। Android पर, Chrome संस्करण और OS सेटिंग्स के आधार पर इसे समर्थन कर सकता है।