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

François Beaufort

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

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

बैकग्राउंड

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

कोड प्राप्त करें

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

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

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

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

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 पर, चलाएं/रोकें, पिछला ट्रैक, और अगले ट्रैक के बटन पिक्चर में पिक्चर विंडो को मीडिया सेशन एपीआई का इस्तेमाल करके कंट्रोल किया जा सकता है.

डिफ़ॉल्ट रूप से, 'पिक्चर में पिक्चर' मोड में, चलाएं/रोकें बटन हमेशा दिखता है विंडो, जब तक वीडियो 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 वीडियो सहायता

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

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

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 ऑब्जेक्ट दिखाने के लिए, नया Web API दिया जाएगा.

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

पिक्चर में पिक्चर Web API, Chrome, Edge, Opera, और Safari में काम करता है. ज़्यादा जानकारी के लिए एमडीएन देखें.

संसाधन

• 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/

मोनीर लामोरी और जेनिफ़र ऐपासिबल को उनके काम के लिए बहुत-बहुत धन्यवाद पिक्चर में पिक्चर और इस लेख के ज़रिए सहायता पाएं. सभी को बहुत-बहुत धन्यवाद मानकों के मुताबिक बनाने की कोशिश में शामिल हैं.