ज़्यादा साइटों पर वीडियो को अपने-आप 'पिक्चर में पिक्चर' मोड में ले जाने की सुविधा

Benjamin Keen

François Beaufort

पब्लिश होने की तारीख: 18 मार्च, 2026

Chrome 142 से, ऑडियो या वीडियो चलाने वाले वेब ऐप्लिकेशन, मीडिया सेशन ऐक्शन हैंडलर रजिस्टर करने पर, अपने-आप Picture-in-Picture मोड में जा सकते हैं. यह सुविधा, संगीत और वीडियो प्लेयर के लिए बहुत अच्छी है. हालांकि, इसके लिए डेवलपर को साफ़ तौर पर सहायता लागू करनी होगी.

मीडिया से जुड़े कई टास्क एक साथ आसानी से करने और Picture-in-Picture (PiP) मोड को आसानी से ढूंढने की सुविधा देने के लिए, Chrome ने ब्राउज़र की ओर से शुरू होने वाले ऑटो PiP मोड को लॉन्च किया है. इस सुविधा की मदद से, Chrome उन साइटों के लिए वीडियो PiP विंडो अपने-आप खोल सकता है जिन्होंने मीडिया सेशन ऐक्शन हैंडलर रजिस्टर नहीं किया है. इससे यह पक्का होता है कि टैब स्विच करने पर भी आपका मीडिया कॉन्टेंट दिखता रहे.

निर्देश

डेस्कटॉप पर Chrome 142 या इसके बाद के वर्शन का इस्तेमाल करें.
chrome://flags/#browser-initiated-automatic-picture-in-picture में जाकर, "Browser initiated automatic picture in picture" को चालू करें और Chrome को फिर से शुरू करें.
किसी वीडियो वेबसाइट पर जाएं और कोई वीडियो चलाएं (उदाहरण).
वीडियो की पीआईपी विंडो को ट्रिगर करने के लिए, किसी दूसरे Chrome टैब पर जाएं.

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

मीडिया चलाने के दौरान किसी दूसरे टैब पर स्विच करने पर, Chrome मीडिया को हमेशा सबसे ऊपर दिखने वाली वीडियो पीआईपी विंडो में अपने-आप ले जा सकता है. "मीडिया चलाने के लिए ऑटो पीआईपी की सुविधा" सिर्फ़ वीडियो या किसी भी एचटीएमएल कॉन्टेंट (Document Picture-in-Picture API का इस्तेमाल करके) के साथ काम करती है. हालांकि, ब्राउज़र से शुरू किए गए अनुरोधों के लिए, हमेशा स्टैंडर्ड वीडियो पीआईपी विंडो खुलती है.

उपयोगकर्ताओं को बेहतर अनुभव देने और उन्हें किसी तरह की परेशानी से बचाने के लिए, Chrome इस सुविधा को सिर्फ़ तब चालू करता है, जब ये शर्तें पूरी होती हैं:

Safe Browsing सेवा के मुताबिक, टॉप फ़्रेम का यूआरएल सुरक्षित है.
मीडिया, सबसे ऊपर वाले फ़्रेम में है.
मीडिया में पिछले दो सेकंड से आवाज़ आ रही है.
मीडिया में ऑडियो फ़ोकस है और वह चल रहा है.
एक "सामान्य" प्लेयर मौजूद हो. इसका मतलब है कि ऐसा मीडिया एलिमेंट जिसे म्यूट नहीं किया गया है और जो चल रहा है. साथ ही, वह MediaStream का इस्तेमाल नहीं कर रहा है.
मीडिया एलिमेंट में वीडियो ट्रैक होना चाहिए.
साइट, कैमरे या माइक्रोफ़ोन का इस्तेमाल नहीं कर रही है.
उपयोगकर्ता के मीडिया से जुड़ाव के इंडेक्स की थ्रेशोल्ड वैल्यू पार हो गई है. इससे पता चलता है कि उपयोगकर्ता साइट का अक्सर इस्तेमाल करता है. यह शर्त तब लागू होती है, जब उपयोगकर्ता ने साफ़ तौर पर इस सुविधा को अनुमति नहीं दी है या अनुमति नहीं दी है.
फ़िलहाल, कोई भी PiP विंडो खुली नहीं है. अगर पहले से कोई PiP विंडो खुली है, तो Chrome अपने-आप ट्रांज़िशन शुरू नहीं करता.

ब्राउज़र की ओर से शुरू किए गए ऑटो पीआईपी (ऐसी साइट जिस पर enterpictureinpicture ऐक्शन हैंडलर नहीं है) और मीडिया चलाने के लिए ऑटो पीआईपी (ऐसी साइट जिस पर हैंडलर रजिस्टर किया गया है) की तुलना.

उपयोगकर्ता के कंट्रोल और निजता से जुड़ी सेटिंग

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

उपयोगकर्ता, "साइट की सेटिंग" में जाकर, इन अनुमतियों को कभी भी मैनेज कर सकते हैं.

डेवलपर के पास कंट्रोल और ऑप्ट-आउट करने का विकल्प

इस सुविधा को ज़्यादातर वीडियो साइटों के साथ काम करने के लिए डिज़ाइन किया गया है. हालांकि, आपके पास इस सुविधा से ऑप्ट आउट करने का विकल्प होता है.

अपना हैंडलर लागू करना

अगर आपका वेब ऐप्लिकेशन, enterpictureinpicture कार्रवाई के लिए मीडिया सेशन ऐक्शन हैंडलर को पहले से ही रजिस्टर करता है, तो आपके लागू किए गए हैंडलर को प्राथमिकता दी जाएगी. साथ ही, Chrome अपने-आप ट्रांज़िशन शुरू नहीं करेगा.

अगर आपको Chrome के हिसाब से ट्रांज़िशन को पसंद के मुताबिक बनाना है, तो enterpictureinpicture ऐक्शन हैंडलर में MediaSessionActionDetails में reason शामिल होता है. यह देखा जा सकता है कि reason contentoccluded है या नहीं. इसका मतलब है कि ब्राउज़र ने अनुरोध शुरू किया है, क्योंकि टैब छिपा हुआ था. इसके बाद, यह तय किया जा सकता है कि आगे क्या करना है.

navigator.mediaSession.setActionHandler("enterpictureinpicture", (details) => {
  if (details.reason === "contentoccluded") {
    // The browser suggests entering Picture-in-Picture.
    // You can choose to open a standard video PiP or a Document PiP window, or do
    // nothing (effectively blocking browser-initiated Auto Picture-in-Picture).
  }
});

मीडिया सेशन के लिए सबसे सही तरीके

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

प्रोग्रेस बार को सिंक करके रखें

अगर setPositionState API का इस्तेमाल किया जाता है और मीडिया सेशन की पोज़िशन को सही तरीके से अपडेट नहीं किया जाता है, तो मीडिया चलाने के दौरान PiP विंडो में प्रोग्रेस बार गलत दिखता है. ऐसा होने से रोकने के लिए, navigator.mediaSession.setPositionState() का इस्तेमाल करके position state को हमेशा अपडेट करें या अनसेट करें. उदाहरण के लिए, जब मीडिया सोर्स बदलता है या रीसेट होता है, तो PiP विंडो में चल रहे मीडिया की सही जगह दिखती है.

const video = document.querySelector('video');

function updatePositionState() {
  if ('setPositionState' in navigator.mediaSession) {
    navigator.mediaSession.setPositionState({
      duration: video.duration,
      playbackRate: video.playbackRate,
      position: video.currentTime,
    });
  }
}

// Update when metadata is loaded or when seeking happens.
video.addEventListener("loadedmetadata", updatePositionState);
video.addEventListener("seeked", updatePositionState);

ट्रांज़िशन को आसानी से हैंडल करना

अगर आपकी साइट पर "अगला एपिसोड" अपने-आप चलने लगता है, तो पक्का करें कि ट्रांज़िशन के दौरान, आपके MediaSession ऐक्शन हैंडलर और मेटाडेटा चालू रहें और सटीक जानकारी दें. अगर "अगला" एलिमेंट पर ट्रांज़िशन के दौरान, ऐक्शन हैंडलर हटा दिए जाते हैं या सेट नहीं किए जाते हैं, तो ऐसा हो सकता है कि PiP विंडो में हैंडलर की ओर से दी गई सुविधाएं काम न करें.

पूरी तरह से कंट्रोल करने की सुविधा चालू करना

वीडियो चलाने और रोकने के अलावा, seekto, previoustrack, और nexttrack के लिए हैंडलर लागू करें. इससे लोग, ओरिजनल टैब पर वापस जाए बिना सीधे तौर पर PiP विंडो से आपके कॉन्टेंट पर जा सकते हैं.

navigator.mediaSession.setActionHandler("seekto", (details) => {
  if (details.fastSeek && "fastSeek" in video) {
    video.fastSeek(details.seekTime);
    return;
  }
  video.currentTime = details.seekTime;
});

सुझाव/राय देना या शिकायत करना

अगर आपको इस व्यवहार के बारे में कोई सुझाव, शिकायत या राय देनी है या आपको कोई समस्या आ रही है, तो crbug.com पर जाकर हमें बताएं.