पिक्चर में पिक्चर (पीआईपी) की सुविधा का इस्तेमाल करना

फ्रांकोइस ब्यूफ़ोर्ट
फ्रांकोइस ब्यूफ़ोर्ट

अप्रैल 2017 से, Android O के लिए Chrome में पिक्चर में पिक्चर की सुविधा काम करती है. इससे उपयोगकर्ता किसी छोटी ओवरले विंडो में <video> एलिमेंट चला सकते हैं, जो किसी दूसरी विंडो से ब्लॉक नहीं होता है, ताकि वे दूसरे काम करते समय उसे देख सकें.

यह इस तरह से काम करता है: Chrome खोलें, वीडियो वाली वेबसाइट पर जाएं और उसे फ़ुलस्क्रीन चलाएं. वहां से, अपनी Android होम स्क्रीन पर जाने के लिए होम बटन दबाएं और चल रहा वीडियो अपने आप पिक्चर में पिक्चर में ट्रांज़िशन हो जाएगा. बस इतना ही! बहुत बढ़िया, है न?

Android पिक्चर में पिक्चर फ़ोटो
पहला डायग्राम. Android पिक्चर में पिक्चर फ़ोटो

हालांकि, डेस्कटॉप के बारे में क्या है? अगर वेबसाइट उस अनुभव को कंट्रोल करना चाहे, तो क्या होगा?

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

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

और वह ऐसा दिख सकता है:

<video id="video" src="https://example.com/file.mp4"></video>

<button id="pipButton"></button>

<script>
    // Hide button if Picture-in-Picture is not supported.
    pipButton.hidden = !document.pictureInPictureEnabled;

    pipButton.addEventListener('click', function() {
    // If there is no element in Picture-in-Picture yet, let's request Picture
    // In Picture for the video, otherwise leave it.
    if (!document.pictureInPictureElement) {
        video.requestPictureInPicture()
        .catch(error => {
        // Video failed to enter Picture-in-Picture mode.
        });
    } else {
        document.exitPictureInPicture()
        .catch(error => {
        // Video failed to leave Picture-in-Picture mode.
        });
    }
    });
</script>

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

तो आपको क्या लगता है? कृपया अपना सुझाव/राय दें या शिकायत करें और पिक्चर में पिक्चर वाले डब्ल्यूआईसीजी डेटा स्टोर करने की जगह में समस्याओं के बारे में बताएं. हम आपके विचार जानने के लिए उत्सुक हैं!

Android पर पीआईपी (पिक्चर में पिक्चर) की डिफ़ॉल्ट कार्रवाई को रोका जा रहा है

फ़िलहाल, साइज़ बदलने वाले इवेंट पर जवाब देकर और विंडो के साइज़ में बहुत ज़्यादा बदलाव होने का पता लगाकर (नीचे दिया गया कोड देखें), Chrome में Android के डिफ़ॉल्ट पीआईपी व्यवहार का इस्तेमाल करने से वीडियो को रोका जा सकता है. हम इसे स्थायी समाधान के तौर पर इस्तेमाल करने का सुझाव नहीं देते हैं. हालांकि, यह तब तक एक विकल्प के तौर पर उपलब्ध रहता है, जब तक Web API लागू नहीं किया जाता.

// See whether resize is small enough to be PiP. It's a hack, but it'll
// work for now.
window.addEventListener('resize', function() {
    if (!document.fullscreenElement) {
    return;
    }

    var minimumScreenSize = 0.33;
    var screenArea = screen.width * screen.height;
    var windowArea = window.outerHeight * window.outerWidth;

    // If the size of the window relative to the screen is less than a third,
    // let's assume we're in PiP and exit fullscreen to prevent Auto PiP.
    if ((windowArea / screenArea) < minimumScreenSize) {
    document.exitFullscreen();
    }
});