पिक्चर में पिक्चर

पिक्चर में पिक्चर (पीआईपी) एक तरह का मल्टी-विंडो मोड है. इसका मकसद, फ़ुल स्क्रीन पर वीडियो चलाने वाली गतिविधियों के लिए है. इस सुविधा की मदद से, उपयोगकर्ता ऐप्लिकेशन के बीच स्विच करते समय या मुख्य स्क्रीन पर कॉन्टेंट ब्राउज़ करते समय, स्क्रीन के कोने पर पिन की गई एक छोटी विंडो में वीडियो देख सकता है.

पहली इमेज: आपके उपयोगकर्ता, आपके ऐप्लिकेशन में न होने पर भी वीडियो देखना जारी रख सकते हैं

सीखने वाली अहम बातें

  • पक्का करें कि गतिविधि के पीआईपी मोड में होने पर, यूज़र इंटरफ़ेस (यूआई) एलिमेंट छिपे हों और वीडियो चलता रहे.
  • वीडियो के अलावा दूसरे कॉन्टेंट के लिए, साइज़ में बदलाव करने की सुविधा बंद करें.
  • कम से कम यूज़र इंटरफ़ेस (यूआई) वाली वीडियो चलाने की गतिविधियां, उपयोगकर्ताओं को बेहतर अनुभव देती हैं.
  • वीडियो के अलावा कुछ भी न दिखाएं.

अपने ऐप्लिकेशन में पिक्चर में पिक्चर की सुविधा जोड़ना

डिफ़ॉल्ट रूप से, सिस्टम ऐप्लिकेशन के लिए PiP मोड की सुविधा अपने-आप काम नहीं करता. इस सुविधा के काम करने के लिए, इसके बारे में एलान करना ज़रूरी है.

पिन किए गए वीडियो की विंडो, स्क्रीन की सबसे ऊपरी लेयर में दिखती है. यह विंडो, सिस्टम के चुने गए कोने में दिखती है.

कंट्रोल

Android डिफ़ॉल्ट रूप से, पीआईपी विंडो को बंद करने, उसे फिर से फ़ुलस्क्रीन में बड़ा करने, सेटिंग, और मीडिया प्लेबैक के लिए कंट्रोल उपलब्ध कराता है. आपका ऐप्लिकेशन, उपयोगकर्ताओं को पिन किए गए कॉन्टेंट के साथ इंटरैक्ट करने की अनुमति देने के लिए, कस्टम ऐक्शन और सही आइकॉन ऐसेट जोड़ सकता है.

उपयोगकर्ता, PiP विंडो मेन्यू से ये कंट्रोल दिखा सकता है. इसके लिए, उसे मोबाइल डिवाइस पर विंडो पर टैप करना होगा या टीवी रिमोट से मेन्यू चुनना होगा. अगर किसी ऐप्लिकेशन में मीडिया सेशन चालू है, तो चलाएं, रोकें, अगला, और पिछला बटन भी दिखते हैं. ये कंट्रोल जोड़ने के तरीके के बारे में पढ़ें.

पीआईपी मोड में, आपकी गतिविधि एक छोटी विंडो में दिखती है. इस मोड में, उपयोगकर्ता आपके ऐप्लिकेशन के अन्य यूज़र इंटरफ़ेस (यूआई) एलिमेंट के साथ इंटरैक्ट नहीं कर सकते. साथ ही, हो सकता है कि पिन किए गए वीडियो की विंडो में छोटे यूआई एलिमेंट की जानकारी देखना मुश्किल हो.

PiP मोड के लिए डिफ़ॉल्ट कंट्रोल

PiP मोड के लिए डिफ़ॉल्ट कंट्रोल.

पसंद के मुताबिक बनाए गए पिन किए गए वीडियो के कंट्रोल का उदाहरण

कस्टम पिन किए गए वीडियो के कंट्रोल का उदाहरण.

इस्तेमाल

उपयोगकर्ताओं को अपने वीडियो को सिर्फ़ आपके ऐप्लिकेशन में ही नहीं, बल्कि अपने डिवाइस पर भी देखने की अनुमति दें. आपका ऐप्लिकेशन यह कंट्रोल करता है कि मौजूदा गतिविधि कब PiP मोड में जाए. यह किसी इंटरैक्शन की वजह से हो सकता है, जैसे कि मौजूदा व्यू को छोड़ना या होम स्क्रीन पर जाने के लिए ऊपर की ओर स्वाइप करना.

यहां कुछ कार्रवाइयों के उदाहरण दिए गए हैं:

  • जब कोई उपयोगकर्ता होम बटन पर टैप करता है या होम स्क्रीन पर ऊपर की ओर स्वाइप करता है, तो कोई गतिविधि पिन की गई विंडो के तौर पर चल सकती है. इस तरह, Google Maps निर्देश दिखाता रहता है, जबकि उपयोगकर्ता एक ही समय पर कोई दूसरी गतिविधि करता है.

    चौथी इमेज: रास्ता ढूंढने की सुविधा को जारी रखने के लिए, पीआईपी का इस्तेमाल किया गया
  • जब कोई उपयोगकर्ता किसी दूसरे कॉन्टेंट को ब्राउज़ करने के लिए, वीडियो से वापस ऐप्लिकेशन पर आता है, तो आपका ऐप्लिकेशन वीडियो को पीआईपी मोड में ले जा सकता है.

  • जब कोई उपयोगकर्ता किसी एपिसोड का आखिरी हिस्सा देख रहा हो, तो आपका ऐप्लिकेशन वीडियो को पीआईपी मोड में स्विच कर सकता है. मुख्य स्क्रीन पर, सीरीज़ के अगले एपिसोड के बारे में प्रमोशन या खास जानकारी दिखती है.

  • आपका ऐप्लिकेशन, उपयोगकर्ताओं को वीडियो देखते समय, ज़्यादा कॉन्टेंट को सूची में जोड़ने का विकल्प दे सकता है. मुख्य स्क्रीन पर कॉन्टेंट चुनने की गतिविधि दिखने के दौरान, वीडियो पीआईपी मोड में चलता रहेगा.

ऐसे इंटरैक्शन पैटर्न का इस्तेमाल करें जो वीडियो देखने के अनुभव को बेहतर बनाता हो और वीडियो में रुकावट न डालता हो. उदाहरण के लिए, अगर वीडियो के किसी एपिसोड का आखिरी हिस्सा चल रहा है, तो होम स्क्रीन पर वापस जाने और वीडियो चलाना बंद करने या छोटे कंट्रोल पर जाने के लिए, उपयोगकर्ता को पीआईपी मोड में वीडियो चलाना होगा.

आपके ऐप्लिकेशन में, कोई उपयोगकर्ता मुख्य स्क्रीन पर कॉन्टेंट ब्राउज़ करते समय, नया वीडियो चुन सकता है. ऐसा तब होता है, जब वीडियो चलाने की गतिविधि पीआईपी मोड में हो. नई गतिविधि शुरू करने के बजाय, मौजूदा वीडियो चलाने की गतिविधि में ही फ़ुल स्क्रीन मोड में नया वीडियो चलाएं. इससे उपयोगकर्ता को भ्रम नहीं होगा.

इंटरैक्शन पैटर्न

उपयोगकर्ता, पीआईपी विंडो को खींचकर किसी दूसरी जगह पर ले जा सकते हैं.

फ़ुल-स्क्रीन टॉगल, बंद करने का बटन, सेटिंग बटन, और आपके ऐप्लिकेशन की ओर से दी गई कस्टम कार्रवाइयां (उदाहरण के लिए, वीडियो चलाने के कंट्रोल) दिखाने के लिए, विंडो पर एक बार टैप करें.

पांचवीं इमेज: पिन किए गए वीडियो के डिफ़ॉल्ट कंट्रोल

PiP विंडो के मौजूदा साइज़ और सबसे बड़े या सबसे छोटे साइज़ के बीच टॉगल करने के लिए, विंडो पर दो बार टैप करें. उदाहरण के लिए, सबसे बड़े साइज़ वाली विंडो पर दो बार टैप करने से, उसका साइज़ सबसे छोटा हो जाता है. इसके अलावा, सबसे छोटे साइज़ वाली विंडो पर दो बार टैप करने से, उसका साइज़ सबसे बड़ा हो जाता है.

छठा इमेज: दो बार टैप करके, पीआईपी के छोटे और बड़े साइज़ के बीच टॉगल करना

विंडो को बाएं या दाएं किनारे पर खींचकर, उसे स्टैश करें. विंडो को स्टैश से हटाने के लिए, स्टैश की गई विंडो के दिख रहे हिस्से पर टैप करें या उसे खींचें और छोड़ें.

सातवीं इमेज: पिन किए गए वीडियो की सुविधा

पिंच करके ज़ूम करने की सुविधा का इस्तेमाल करके, पीआईपी विंडो का साइज़ बदलें.

विंडो हटाने के लिए, पीआईपी को नीचे की ओर स्वाइप करें.

आठवीं इमेज: नीचे की ओर स्वाइप करना

ट्रांज़िशन

पीआईपी मोड में जाने के दौरान स्मूद ऐनिमेशन

जब कोई उपयोगकर्ता पिन किए गए विंडो मोड को चालू करता है, तो मौजूदा गतिविधि फ़ुलस्क्रीन से छोटी विंडो में बदल जाती है. यह विंडो, किसी भी यूज़र इंटरफ़ेस को ओवरले किए बिना कॉन्टेंट दिखाती रहती है.

Android 12 में, फ़ुलस्क्रीन और पिन की गई विंडो के बीच ऐनिमेशन वाले ट्रांज़िशन को बेहतर बनाया गया है. हमारा सुझाव है कि आप सभी लागू होने वाले बदलाव लागू करें. ऐसा करने के बाद, ये बदलाव फ़ोल्ड किए जा सकने वाले डिवाइसों और टैबलेट जैसी बड़ी स्क्रीन पर अपने-आप लागू हो जाएंगे. इसके लिए, आपको कुछ भी करने की ज़रूरत नहीं होगी.

अगर आपके ऐप्लिकेशन में ये अपडेट शामिल नहीं हैं, तो भी पिन किए गए विंडो के ट्रांज़िशन की सुविधा काम करती रहेगी. हालांकि, ऐनिमेशन थोड़े खराब दिखेंगे. उदाहरण के लिए, फ़ुल स्क्रीन से पिन किए गए विंडो मोड पर स्विच करने पर, ट्रांज़िशन के दौरान पिन की गई विंडो गायब हो सकती है. ट्रांज़िशन पूरा होने पर, वह फिर से दिखने लगती है.

Android 12 में, PictureInPictureParams.Builder.setAutoEnterEnabled(true) फ़्लैग की मदद से, जेस्चर नेविगेशन का इस्तेमाल करके, पीआईपी मोड में वीडियो कॉन्टेंट पर स्विच करने के लिए, ज़्यादा बेहतर ऐनिमेशन मिलता है. उदाहरण के लिए, फ़ुलस्क्रीन से होम पर स्वाइप करने पर. हमारा सुझाव है कि अगर आपका ऐप्लिकेशन ENTERTAINMENT, COMMUNICATION या VIDEO_PLAYER ऐप्लिकेशन कैटगरी में आता है, तो ऐसा करें.

अगर आपके ऐप्लिकेशन में यह बदलाव शामिल नहीं है, तो जेस्चर नेविगेशन की मदद से पीआईपी ट्रांज़िशन की सुविधा अब भी काम करती है. हालांकि, ऐनिमेशन थोड़े खराब दिखते हैं. पहले वीडियो में इसका उदाहरण दिया गया है: विंडो, ऐप्लिकेशन आइकॉन में छोटी हो जाती है और गायब हो जाती है. इसके बाद, ट्रांज़िशन पूरा होने पर फिर से दिखती है.

जब पिन किए गए वीडियो के लिए setAutoEnterEnabled को सही तरीके से लागू नहीं किया गया है, तो ट्रांज़िशन का अनुभव अच्छा नहीं होता

ऐप्लिकेशन में setAutoEnterEnabled जोड़ा गया है, जिससे ट्रांज़िशन का बेहतर अनुभव मिलता है.

वीडियो में स्मूद विज़ुअल

जब हमने Android 8.0 में पीआईपी की सुविधा लॉन्च की थी, तब sourceRectHint से उस ऐक्टिविटी के हिस्से की जानकारी मिलती थी जो पीआईपी में ट्रांज़िशन होने के बाद दिखता है. उदाहरण के लिए, वीडियो प्लेयर में वीडियो व्यू का बॉर्डर. Android 12 से, ऑपरेटिंग सिस्टम sourceRectHint का इस्तेमाल करता है, ताकि पीआईपी मोड में जाने और उससे बाहर निकलने के दौरान, बेहतर ऐनिमेशन लागू किया जा सके.

अगर आपका ऐप्लिकेशन सही sourceRectHint नहीं दिखाता है, तो भी पीआईपी ट्रांज़िशन काम करते हैं. हालांकि, ऐनिमेशन उतने बेहतर नहीं होते. उदाहरण के लिए, तीसरे वीडियो में फ़ुल स्क्रीन से पीआईपी मोड पर ट्रांज़िशन करने का उदाहरण दिया गया है. इसमें फ़ुल स्क्रीन विंडो, पीआईपी विंडो में छोटी हो जाती है. इसके बाद, वीडियो को फिर से दिखाने से पहले, उसे ब्लैक ओवरले से ढक दिया जाता है.

तीसरा वीडियो: जब पीआईपी में sourceRectHint को सही तरीके से लागू नहीं किया गया हो, तो ट्रांज़िशन का अनुभव अच्छा नहीं होगा

sourceRectHint को सही तरीके से लागू करने पर, पिन किए गए वीडियो का ऐनिमेशन कैसा दिखता है, इसका उदाहरण देखने के लिए पिछले सेक्शन में मौजूद दूसरा वीडियो देखें.

बेहतर ट्रांज़िशन अनुभव देने के लिए, Android Kotlin PictureInPicture सैंपल को रेफ़रंस के तौर पर देखें.

पिक्चर में पिक्चर की सुविधा को लागू करने के बारे में ज़्यादा जानने के लिए, पिक्चर में पिक्चर की सुविधा के लिए डेवलपर के दस्तावेज़ देखें.