'पिक्चर में पिक्चर' सुविधा का इस्तेमाल करके वीडियो देखना

François Beaufort

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

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

बैकग्राउंड

सितंबर 2016 में, Safari ने macOS Sierra में WebKit API के ज़रिए, पिक्चर में पिक्चर की सुविधा जोड़ी थी. छह महीने बाद, Android O के रिलीज़ होने के साथ, Chrome ने मोबाइल पर नेटिव Android API का इस्तेमाल करके, पिक्चर में पिक्चर मोड में वीडियो अपने-आप चलाया. छह महीने बाद, हमने अपने इंटेंट का एलान किया. इसमें हमने बताया था कि हम एक वेब एपीआई बनाएंगे और उसे स्टैंडर्ड बनाएंगे. यह एपीआई, Safari के साथ काम करेगा. इससे वेब डेवलपर, पिक्चर में पिक्चर की सुविधा को पूरी तरह से बना और कंट्रोल कर पाएंगे. और अब हम यहां हैं!

कोड डालें

पिक्चर में पिक्चर मोड चालू करना

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

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

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

pipButtonElement.addEventListener('click', async function () {
  pipButtonElement.disabled = true;

  await videoElement.requestPictureInPicture();

  pipButtonElement.disabled = false;
});

प्रॉमिस पूरा होने के बाद, Chrome वीडियो को छोटी विंडो में बदल देता है. इस विंडो को उपयोगकर्ता, अपनी पसंद के मुताबिक कहीं भी ले जा सकता है और दूसरी विंडो के ऊपर रख सकता है.

आपका काम हो गया. बहुत बढ़िया! अब पढ़ना बंद करके, अपनी ज़रूरत के मुताबिक छुट्टियां लें. माफ़ करें, ऐसा हमेशा नहीं होता. इनमें से किसी भी वजह से, वादा अस्वीकार किया जा सकता है:

• सिस्टम पर पिक्चर में पिक्चर की सुविधा काम नहीं करती.
• अनुमतियों से जुड़ी नीति की वजह से, दस्तावेज़ में पिक्चर में पिक्चर मोड का इस्तेमाल नहीं किया जा सकता.
• वीडियो का मेटाडेटा अभी तक लोड नहीं हुआ है (videoElement.readyState === 0).
• वीडियो फ़ाइल में सिर्फ़ ऑडियो है.
• नया disablePictureInPicture एट्रिब्यूट, वीडियो एलिमेंट पर मौजूद होता है.
• कॉल, उपयोगकर्ता के जेस्चर इवेंट हैंडलर (जैसे, बटन पर क्लिक) में नहीं किया गया था. Chrome 74 से, यह सिर्फ़ तब लागू होगा, जब पिक्चर में पिक्चर मोड में कोई एलिमेंट पहले से मौजूद न हो.

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

इन संभावित गड़बड़ियों को कैप्चर करने के लिए, try...catch ब्लॉक जोड़ें और उपयोगकर्ता को बताएं कि क्या हो रहा है.

pipButtonElement.addEventListener('click', async function () {
  pipButtonElement.disabled = true;

  try {
    await videoElement.requestPictureInPicture();
  } catch (error) {
    // TODO: Show error message to user.
  } finally {
    pipButtonElement.disabled = false;
  }
});

वीडियो एलिमेंट, पिक्चर में पिक्चर मोड में होने पर भी वैसा ही काम करता है जैसा कि सामान्य मोड में होता है: इवेंट ट्रिगर होते हैं और कॉल करने के तरीके काम करते हैं. यह पिक्चर में पिक्चर विंडो की स्थिति में होने वाले बदलावों को दिखाता है. जैसे, चलाना, रोकना, आगे या पीछे जाना वगैरह. साथ ही, JavaScript में प्रोग्राम के हिसाब से भी स्थिति बदली जा सकती है.

पिक्चर में पिक्चर मोड से बाहर निकलना

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

    ...
    try {
      if (videoElement !== document.pictureInPictureElement) {
        await videoElement.requestPictureInPicture();
      } else {
        await document.exitPictureInPicture();
      }
    }
    ...

पिक्चर में पिक्चर मोड के इवेंट सुनना

आम तौर पर, ऑपरेटिंग सिस्टम, पिक्चर में पिक्चर मोड को एक विंडो तक सीमित रखते हैं. इसलिए, Chrome में भी यह मोड इसी तरह काम करता है. इसका मतलब है कि उपयोगकर्ता एक बार में सिर्फ़ एक पिक्चर में पिक्चर वीडियो चला सकते हैं. आपको यह उम्मीद करनी चाहिए कि उपयोगकर्ता, आपके कहने के बिना भी पिक्चर में पिक्चर मोड से बाहर निकल सकते हैं.

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

videoElement.addEventListener('enterpictureinpicture', function (event) {
  // Video entered Picture-in-Picture.
});

videoElement.addEventListener('leavepictureinpicture', function (event) {
  // Video left Picture-in-Picture.
  // User may have played a Picture-in-Picture video from a different page.
});

पिक्चर में पिक्चर विंडो को पसंद के मुताबिक बनाना

Chrome 74 में, पिक्चर में पिक्चर विंडो में 'चलाएं/रोकें', पिछला ट्रैक, और अगला ट्रैक बटन काम करते हैं. इन्हें Media Session API का इस्तेमाल करके कंट्रोल किया जा सकता है.

डिफ़ॉल्ट रूप से, पिक्चर में पिक्चर विंडो में हमेशा चलाएं/रोकें बटन दिखता है. ऐसा तब तक होता है, जब तक वीडियो में MediaStream ऑब्जेक्ट (जैसे, getUserMedia(), getDisplayMedia(), canvas.captureStream()) नहीं चल रहे हैं या वीडियो में MediaSource की अवधि +Infinity (जैसे, लाइव फ़ीड) पर सेट नहीं है. यह पक्का करने के लिए कि चलाएं/रोकें बटन हमेशा दिखे, "चलाएं" और "रोकें", दोनों मीडिया इवेंट के लिए कुछ मीडिया सेशन ऐक्शन हैंडलर सेट करें. इसके लिए, नीचे दिया गया तरीका अपनाएं.

// Show a play/pause button in the Picture-in-Picture window
navigator.mediaSession.setActionHandler('play', function () {
  // User clicked "Play" button.
});
navigator.mediaSession.setActionHandler('pause', function () {
  // User clicked "Pause" button.
});

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

navigator.mediaSession.setActionHandler('previoustrack', function () {
  // User clicked "Previous Track" button.
});

navigator.mediaSession.setActionHandler('nexttrack', function () {
  // User clicked "Next Track" button.
});

इसे काम करते हुए देखने के लिए, आधिकारिक मीडिया सेशन का सैंपल आज़माएं.

पिक्चर में पिक्चर विंडो का साइज़ देखना

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

नीचे दिए गए उदाहरण में, 'पिक्चर में पिक्चर' विंडो बनाने या उसका साइज़ बदलने पर, उसकी चौड़ाई और ऊंचाई पाने का तरीका बताया गया है.

let pipWindow;

videoElement.addEventListener('enterpictureinpicture', function (event) {
  pipWindow = event.pictureInPictureWindow;
  console.log(`> Window size is ${pipWindow.width}x${pipWindow.height}`);
  pipWindow.addEventListener('resize', onPipWindowResize);
});

videoElement.addEventListener('leavepictureinpicture', function (event) {
  pipWindow.removeEventListener('resize', onPipWindowResize);
});

function onPipWindowResize(event) {
  console.log(
    `> Window size changed to ${pipWindow.width}x${pipWindow.height}`
  );
  // TODO: Change video quality based on Picture-in-Picture window size.
}

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

सुविधा के इस्तेमाल के लिए सहायता

ऐसा हो सकता है कि पिक्चर में पिक्चर वेब एपीआई काम न करे. इसलिए, बेहतर अनुभव देने के लिए, आपको इसकी पहचान करनी होगी. भले ही, यह सुविधा काम करती हो, लेकिन हो सकता है कि उपयोगकर्ता ने इसे बंद कर दिया हो या अनुमतियों की नीति की वजह से यह बंद हो. हालांकि, इसका पता लगाने के लिए, नए बोलियन document.pictureInPictureEnabled का इस्तेमाल किया जा सकता है.

if (!('pictureInPictureEnabled' in document)) {
  console.log('The Picture-in-Picture Web API is not available.');
} else if (!document.pictureInPictureEnabled) {
  console.log('The Picture-in-Picture Web API is disabled.');
}

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

if ('pictureInPictureEnabled' in document) {
  // Set button ability depending on whether Picture-in-Picture can be used.
  setPipButton();
  videoElement.addEventListener('loadedmetadata', setPipButton);
  videoElement.addEventListener('emptied', setPipButton);
} else {
  // Hide button if Picture-in-Picture is not supported.
  pipButtonElement.hidden = true;
}

function setPipButton() {
  pipButtonElement.disabled =
    videoElement.readyState === 0 ||
    !document.pictureInPictureEnabled ||
    videoElement.disablePictureInPicture;
}

MediaStream वीडियो के लिए सहायता

Chrome 71 में, वीडियो चलाने वाले MediaStream ऑब्जेक्ट (जैसे, getUserMedia(), getDisplayMedia(), canvas.captureStream()) भी पिक्चर में पिक्चर मोड के साथ काम करते हैं. इसका मतलब है कि आपके पास पिक्चर में पिक्चर वाली ऐसी विंडो दिखाने का विकल्प है जिसमें उपयोगकर्ता के वेबकैम की वीडियो स्ट्रीम, डिसप्ले वीडियो स्ट्रीम या कैनवस एलिमेंट शामिल हो. ध्यान दें कि यहां दिखाए गए तरीके के मुताबिक, पिक्चर में पिक्चर मोड में जाने के लिए, वीडियो एलिमेंट को डीओएम से अटैच करने की ज़रूरत नहीं है.

'पिक्चर में पिक्चर' विंडो में उपयोगकर्ता का वेबकैम दिखाना

const video = document.createElement('video');
video.muted = true;
video.srcObject = await navigator.mediaDevices.getUserMedia({video: true});
video.play();

// Later on, video.requestPictureInPicture();

डिसप्ले को पिक्चर में पिक्चर विंडो में दिखाना

const video = document.createElement('video');
video.muted = true;
video.srcObject = await navigator.mediaDevices.getDisplayMedia({video: true});
video.play();

// Later on, video.requestPictureInPicture();

पिक्चर में पिक्चर विंडो में कैनवस एलिमेंट दिखाना

const canvas = document.createElement('canvas');
// Draw something to canvas.
canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height);

const video = document.createElement('video');
video.muted = true;
video.srcObject = canvas.captureStream();
video.play();

// Later on, video.requestPictureInPicture();

उदाहरण के लिए, canvas.captureStream() को मीडिया सेशन एपीआई के साथ जोड़कर, Chrome 74 में ऑडियो प्लेलिस्ट विंडो बनाई जा सकती है. ऑडियो प्लेलिस्ट का आधिकारिक सैंपल देखें.

सैंपल, डेमो, और कोडलैब

पिक्चर में पिक्चर वाला वेब एपीआई आज़माने के लिए, पिक्चर में पिक्चर का आधिकारिक सैंपल देखें.

इसके बाद, डेमो और कोडलैब उपलब्ध कराए जाएंगे.

अब क्या होगा

सबसे पहले, लागू करने की स्थिति वाला पेज देखें. इससे आपको पता चलेगा कि एपीआई के कौनसे हिस्से फ़िलहाल Chrome और अन्य ब्राउज़र में लागू किए गए हैं.

आने वाले समय में, आपको ये सुविधाएं मिल सकती हैं:

• वेब डेवलपर, कस्टम पिक्चर-इन-पिक्चर कंट्रोल जोड़ पाएंगे.
• फ़्लोटिंग विंडो में मनमुताबिक HTMLElement ऑब्जेक्ट दिखाने के लिए, एक नया वेब एपीआई उपलब्ध कराया जाएगा.

ब्राउज़र समर्थन

पिक्चर में पिक्चर वेब एपीआई, Chrome, Edge, Opera, और Safari पर काम करता है. ज़्यादा जानकारी के लिए, MDN देखें.

संसाधन

• Chrome की सुविधा की स्थिति: https://www.chromestatus.com/feature/5729206566649856
• Chrome में लागू करने से जुड़ी गड़बड़ियां: https://crbug.com/?q=component:Blink>Media>PictureInPicture
• पिक्चर में पिक्चर वेब एपीआई स्पेसिफ़िकेशन: https://wicg.github.io/picture-in-picture
• खास समस्याएं: https://github.com/WICG/picture-in-picture/issues
• उदाहरण: https://googlechrome.github.io/samples/picture-in-picture/
• पिक्चर में पिक्चर (पीआईपी) की सुविधा के लिए, आधिकारिक नहीं है: https://github.com/gbentaieb/pip-polyfill/

पिक्चर में पिक्चर की सुविधा पर काम करने और इस लेख को तैयार करने में मदद करने के लिए, मौनीर लामौरी और जेनिफर अपैसिबल का बहुत-बहुत धन्यवाद. साथ ही, स्टैंडर्ड बनाने की प्रोसेस में शामिल सभी लोगों का बहुत-बहुत धन्यवाद.