যেকোনো উপাদানের জন্য পিকচার-ইন-পিকচার, শুধু <ভিডিও>

François Beaufort

ডকুমেন্ট পিকচার-ইন-পিকচার এপিআই এমন একটি উইন্ডো খোলার সুযোগ করে দেয় যা সর্বদা উপরে থাকে এবং এতে যেকোনো এইচটিএমএল কন্টেন্ট যোগ করা যায়। এটি <video> এর জন্য বিদ্যমান পিকচার-ইন-পিকচার এপিআই-কে সম্প্রসারিত করে, যা কেবল একটি এইচটিএমএল <video> এলিমেন্টকে পিকচার-ইন-পিকচার (PiP) উইন্ডোতে রাখার অনুমতি দেয়।

ডকুমেন্ট পিকচার-ইন-পিকচার এপিআই-এর পিকচার-ইন-পিকচার উইন্ডোটি window.open() ব্যবহার করে খোলা একটি ফাঁকা সেম-অরিজিন উইন্ডোর অনুরূপ, তবে কিছু পার্থক্য রয়েছে:

• পিকচার-ইন-পিকচার উইন্ডোটি অন্যান্য উইন্ডোগুলোর উপরে ভাসমান থাকে।
• পিকচার-ইন-পিকচার উইন্ডোটি খোলার উইন্ডোটির চেয়ে বেশিদিন টেকে না।
• পিকচার-ইন-পিকচার উইন্ডোটি নেভিগেট করা যাচ্ছে না।
• ওয়েবসাইট থেকে পিকচার-ইন-পিকচার উইন্ডোর অবস্থান নির্ধারণ করা যায় না।

অবস্থা

ব্যবহারের ক্ষেত্র

আপনি এই এপিআইটি বিভিন্ন উপায়ে ব্যবহার করতে পারেন, যার মধ্যে রয়েছে কাস্টম ভিডিও প্লেয়ার, ভিডিও কনফারেন্সিং এবং প্রোডাক্টিভিটি অ্যাপ।

কাস্টম ভিডিও প্লেয়ার

একটি ওয়েবসাইট <video> এর জন্য বিদ্যমান পিকচার-ইন-পিকচার এপিআই ব্যবহার করে পিকচার-ইন-পিকচার ভিডিও অভিজ্ঞতা প্রদান করতে পারে, তবে এটি খুবই সীমিত। বিদ্যমান পিআইপি উইন্ডোটি অল্প কিছু ইনপুট গ্রহণ করে এবং সেগুলোকে স্টাইল করার ক্ষমতাও সীমিত। পিকচার-ইন-পিকচারে একটি সম্পূর্ণ ডকুমেন্ট থাকলে, ওয়েবসাইটটি ব্যবহারকারীর পিআইপি ভিডিও অভিজ্ঞতা উন্নত করার জন্য কাস্টম কন্ট্রোল এবং ইনপুট (যেমন, ক্যাপশন , প্লেলিস্ট, টাইম স্ক্রাবার, ভিডিও লাইক ও ডিসলাইক করা) প্রদান করতে পারে।

ভিডিও কনফারেন্সিং

ভিডিও কনফারেন্সিং সেশনের সময় ব্যবহারকারীরা প্রায়শই সাময়িকভাবে ব্রাউজার ট্যাব থেকে বেরিয়ে যান, যেমন অন্য ট্যাব থেকে কলে প্রেজেন্টেশন দেওয়ার সময়, নোট নেওয়ার সময় বা অন্যান্য মাল্টিটাস্কিং কার্যকলাপের সময়। তবে, বেশিরভাগ ক্ষেত্রেই ব্যবহারকারী কলটি দেখতে চান, তাই এটি পিকচার-ইন-পিকচারের জন্য একটি আদর্শ ব্যবহার। আবারও, একটি ভিডিও কনফারেন্সিং ওয়েবসাইট <video> -এর জন্য পিকচার-ইন-পিকচার এপিআই ব্যবহার করে বর্তমানে যে অভিজ্ঞতা দিতে পারে, তা স্টাইল এবং ইনপুটের দিক থেকে সীমিত। পিকচার-ইন-পিকচারে একটি সম্পূর্ণ ডকুমেন্ট থাকলে, ওয়েবসাইটটি ক্যানভাস হ্যাকের উপর নির্ভর না করেই একাধিক ভিডিও স্ট্রিমকে সহজেই একটি একক PiP উইন্ডোতে একত্রিত করতে পারে এবং কাস্টম কন্ট্রোল প্রদান করতে পারে, যেমন মেসেজ পাঠানো, অন্য ব্যবহারকারীকে মিউট করা বা হাত তোলা।

উৎপাদনশীলতা

গবেষণায় দেখা গেছে যে, ওয়েবে ব্যবহারকারীদের আরও বেশি উৎপাদনশীল হওয়ার জন্য আরও বেশি উপায়ের প্রয়োজন। ডকুমেন্ট ইন পিকচার-ইন-পিকচার ওয়েব অ্যাপগুলোকে আরও বেশি কাজ সম্পন্ন করার নমনীয়তা দেয়। টেক্সট এডিটিং, নোট নেওয়া, টাস্ক লিস্ট, মেসেজিং ও চ্যাট, কিংবা ডিজাইন ও ডেভেলপমেন্ট টুলস—যা-ই হোক না কেন, ওয়েব অ্যাপগুলো এখন তাদের কন্টেন্ট সবসময় সহজলভ্য রাখতে পারে।

ইন্টারফেস

বৈশিষ্ট্য

documentPictureInPicture.window

যদি কোনো বর্তমান পিকচার-ইন-পিকচার উইন্ডো থাকে, তবে সেটি ফেরত দেয়। অন্যথায়, null ফেরত দেয়।

পদ্ধতি

documentPictureInPicture.requestWindow(options)

একটি প্রমিজ রিটার্ন করে যা একটি পিকচার-ইন-পিকচার উইন্ডো খোলা হলে রিজলভ হয়। ব্যবহারকারীর কোনো অঙ্গভঙ্গি ছাড়া কল করা হলে প্রমিজটি রিজেক্ট হয়। options ডিকশনারিতে নিম্নলিখিত ঐচ্ছিক মেম্বারগুলো থাকে:

width

পিকচার-ইন-পিকচার উইন্ডোর প্রাথমিক প্রস্থ নির্ধারণ করে।

height

পিকচার-ইন-পিকচার উইন্ডোর প্রাথমিক উচ্চতা নির্ধারণ করে।

disallowReturnToOpener

যদি true হয়, তাহলে পিকচার-ইন-পিকচার উইন্ডোতে থাকা 'ব্যাক টু ট্যাব' বাটনটি লুকিয়ে ফেলে। ডিফল্টরূপে এটি false থাকে।

preferInitialWindowPlacement

যদি 'true' হয়, তাহলে পিকচার-ইন-পিকচার উইন্ডোটি তার ডিফল্ট অবস্থান ও আকারে খুলবে। ডিফল্টরূপে এটি 'false' থাকে।

ইভেন্টগুলি

documentPictureInPicture.onenter

যখন একটি পিকচার-ইন-পিকচার উইন্ডো খোলা হয়, তখন documentPictureInPicture এ এই ফাংশনটি ট্রিগার হয়।

উদাহরণ

নিম্নলিখিত HTML কোডটি একটি কাস্টম ভিডিও প্লেয়ার এবং একটি বাটন এলিমেন্ট সেট আপ করে, যা ভিডিও প্লেয়ারটিকে একটি পিকচার-ইন-পিকচার উইন্ডোতে খোলে।

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

একটি পিকচার-ইন-পিকচার উইন্ডো খুলুন

যখন ব্যবহারকারী একটি খালি পিকচার-ইন-পিকচার উইন্ডো খোলার জন্য বোতামে ক্লিক করেন, তখন নিম্নলিখিত জাভাস্ক্রিপ্টটি documentPictureInPicture.requestWindow() কে কল করে। ফেরত আসা প্রমিসটি একটি পিকচার-ইন-পিকচার উইন্ডো জাভাস্ক্রিপ্ট অবজেক্ট দিয়ে রিজলভ হয়। append() ব্যবহার করে ভিডিও প্লেয়ারটিকে সেই উইন্ডোতে সরানো হয়।

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

পিকচার-ইন-পিকচার উইন্ডোর আকার নির্ধারণ করুন।

পিকচার-ইন-পিকচার উইন্ডোর আকার নির্ধারণ করতে, documentPictureInPicture.requestWindow() এর width এবং height অপশনগুলো আদর্শ PiP উইন্ডোর আকারে সেট করুন। ব্যবহারকারী-বান্ধব উইন্ডোর আকারের সাথে মানিয়ে নেওয়ার জন্য অপশনের মানগুলো খুব বড় বা খুব ছোট হলে Chrome সেগুলোকে কমিয়ে দিতে পারে।

pipButton.addEventListener("click", async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window whose size is
  // the same as the player's.
  const pipWindow = await documentPictureInPicture.requestWindow({
    width: player.clientWidth,
    height: player.clientHeight,
  });

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

PiP উইন্ডোতে 'ব্যাক টু ট্যাব' বাটনটি লুকান।

পিকচার-ইন-পিকচার উইন্ডোতে থাকা সেই বাটনটি লুকাতে, যা ব্যবহারকারীকে ওপেনার ট্যাবে ফিরে যেতে দেয়, documentPictureInPicture.requestWindow() এর disallowReturnToOpener অপশনটিকে true তে সেট করুন।

pipButton.addEventListener("click", async () => {
  // Open a Picture-in-Picture window which hides the "back to tab" button.
  const pipWindow = await documentPictureInPicture.requestWindow({
    disallowReturnToOpener: true,
  });
});

PiP ডিফল্ট অবস্থান এবং আকারে খুলুন।

পূর্ববর্তী পিকচার-ইন-পিকচার উইন্ডোর অবস্থান বা আকার পুনরায় ব্যবহার না করতে, documentPictureInPicture.requestWindow() এর preferInitialWindowPlacement অপশনটিকে true তে সেট করুন।

pipButton.addEventListener("click", async () => {
  // Open a Picture-in-Picture window in its default position / size.
  const pipWindow = await documentPictureInPicture.requestWindow({
    preferInitialWindowPlacement: true,
  });
});

স্টাইল শীটগুলো PiP-তে কপি করুন

মূল উইন্ডো থেকে সমস্ত CSS স্টাইল শীট কপি করতে, ডকুমেন্টে স্পষ্টভাবে লিঙ্ক করা বা এমবেড করা styleSheets মধ্যে লুপ চালান এবং সেগুলোকে পিকচার-ইন-পিকচার উইন্ডোতে যুক্ত করুন। মনে রাখবেন, এটি একবারই কপি করা যাবে।

pipButton.addEventListener("click", async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Copy style sheets over from the initial document
  // so that the player looks the same.
  [...document.styleSheets].forEach((styleSheet) => {
    try {
      const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');
      const style = document.createElement('style');

      style.textContent = cssRules;
      pipWindow.document.head.appendChild(style);
    } catch (e) {
      const link = document.createElement('link');

      link.rel = 'stylesheet';
      link.type = styleSheet.type;
      link.media = styleSheet.media;
      link.href = styleSheet.href;
      pipWindow.document.head.appendChild(link);
    }
  });

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

PiP উইন্ডো বন্ধ হলে হ্যান্ডেল করুন

পিকচার-ইন-পিকচার উইন্ডোটি কখন বন্ধ হয় (ওয়েবসাইট নিজে থেকে বন্ধ করুক বা ব্যবহারকারী নিজে থেকে বন্ধ করুক) তা জানার জন্য উইন্ডোর "pagehide" ইভেন্টটি শুনুন। এখানে যেমন দেখানো হয়েছে, পিকচার-ইন-পিকচার উইন্ডো থেকে এলিমেন্টগুলোকে আবার বের করে আনার জন্য ইভেন্ট হ্যান্ডলারটি একটি ভালো জায়গা।

pipButton.addEventListener("click", async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);

  // Move the player back when the Picture-in-Picture window closes.
  pipWindow.addEventListener("pagehide", (event) => {
    const playerContainer = document.querySelector("#playerContainer");
    const pipPlayer = event.target.querySelector("#player");
    playerContainer.append(pipPlayer);
  });
});

` close() মেথড ব্যবহার করে প্রোগ্রাম্যাটিকভাবে পিকচার-ইন-পিকচার উইন্ডোটি বন্ধ করুন।

// Close the Picture-in-Picture window programmatically.
// The "pagehide" event will fire normally.
pipWindow.close();

ওয়েবসাইটটি কখন PiP-তে প্রবেশ করে তা শুনুন।

একটি পিকচার-ইন-পিকচার উইন্ডো কখন খোলা হয় তা জানতে documentPictureInPicture এর "enter" ইভেন্টটি শুনুন। এই ইভেন্টটিতে পিকচার-ইন-পিকচার উইন্ডোটি অ্যাক্সেস করার জন্য একটি window অবজেক্ট থাকে।

documentPictureInPicture.addEventListener("enter", (event) => {
  const pipWindow = event.window;
});

PiP উইন্ডোতে উপাদান অ্যাক্সেস করুন

documentPictureInPicture.requestWindow() দ্বারা ফেরত আসা অবজেক্ট থেকে, অথবা documentPictureInPicture.window ব্যবহার করে পিকচার-ইন-পিকচার উইন্ডোর উপাদানগুলো অ্যাক্সেস করুন।

const pipWindow = documentPictureInPicture.window;
if (pipWindow) {
  // Mute video playing in the Picture-in-Picture window.
  const pipVideo = pipWindow.document.querySelector("#video");
  pipVideo.muted = true;
}

PiP উইন্ডো থেকে ইভেন্টগুলি পরিচালনা করুন

জাভাস্ক্রিপ্টে বরাবরের মতোই বাটন ও কন্ট্রোল তৈরি করুন এবং ব্যবহারকারীর ইনপুট ইভেন্টে (যেমন "click" ) সাড়া দিন।

// Add a "mute" button to the Picture-in-Picture window.
const pipMuteButton = pipWindow.document.createElement("button");
pipMuteButton.textContent = "Mute";
pipMuteButton.addEventListener("click", () => {
  const pipVideo = pipWindow.document.querySelector("#video");
  pipVideo.muted = true;
});
pipWindow.document.body.append(pipMuteButton);

PiP উইন্ডোর আকার পরিবর্তন করুন

পিকচার-ইন-পিকচার উইন্ডোর আকার পরিবর্তন করতে resizeBy() এবং resizeTo() Window মেথডগুলো ব্যবহার করুন। উভয় মেথডের জন্যই ব্যবহারকারীর অঙ্গভঙ্গি প্রয়োজন।

const resizeButton = pipWindow.document.createElement('button');
resizeButton.textContent = 'Resize';
resizeButton.addEventListener('click', () => {
  // Expand the Picture-in-Picture window's width by 20px and height by 30px.
  pipWindow.resizeBy(20, 30);
});
pipWindow.document.body.append(resizeButton);

ওপেনার উইন্ডোতে ফোকাস করুন

পিকচার-ইন-পিকচার উইন্ডো থেকে ওপেনার উইন্ডোতে ফোকাস করার জন্য ` focus() ` উইন্ডো মেথডটি ব্যবহার করুন। এই মেথডটির জন্য ব্যবহারকারীর একটি জেসচার প্রয়োজন।

const returnToTabButton = pipWindow.document.createElement("button");
returnToTabButton.textContent = "Return to opener tab";
returnToTabButton.addEventListener("click", () => {
  window.focus();
});
pipWindow.document.body.append(returnToTabButton);

CSS PiP প্রদর্শন মোড

CSS picture-in-picture ডিসপ্লে মোড ব্যবহার করে এমন নির্দিষ্ট CSS নিয়ম লিখুন, যা শুধুমাত্র তখনই প্রয়োগ করা হবে যখন ওয়েব অ্যাপটির (বা এর কোনো অংশ) পিকচার-ইন-পিকচার মোডে দেখানো হবে।

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

বৈশিষ্ট্য সনাক্তকরণ

ডকুমেন্ট পিকচার-ইন-পিকচার এপিআই সমর্থিত কিনা তা পরীক্ষা করতে, ব্যবহার করুন:

if ('documentPictureInPicture' in window) {
  // The Document Picture-in-Picture API is supported.
}

ডেমো

• VideoJS প্লেয়ার : ডকুমেন্ট পিকচার-ইন-পিকচার এপিআই ব্যবহার করে ভিডিওজেএস প্লেয়ার ডেমো চালান।
• Tomodoro , একটি পোমোডোরো ওয়েব অ্যাপ, উপলব্ধ থাকলে Document Picture-in-Picture API-এর সুবিধা গ্রহণ করে। তাদের GitHub পুল রিকোয়েস্টটি দেখুন।

আপনার মতামত জানান

পরামর্শ ও প্রশ্ন থাকলে গিটহাবে ইস্যু ফাইল করুন ।

দরকারী লিঙ্ক

• জনসাধারণের ব্যাখ্যাকারী
• WICG স্পেসিফিকেশন
• ক্রোমিয়াম ট্র্যাকিং বাগ
• ChromeStatus.com এন্ট্রি
• ব্লিঙ্ক কম্পোনেন্ট: Blink>Media>PictureInPicture
• ট্যাগ পর্যালোচনা
• পরীক্ষা করার অভিপ্রায়
• জাহাজীকরণের অভিপ্রায়