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

ফ্রাঁসোয়া বিউফোর্ট
François Beaufort
GitHub

ব্রাউজার সমর্থন

  • ক্রোম: 116।
  • প্রান্ত: 116।
  • ফায়ারফক্স: সমর্থিত নয়।
  • সাফারি: সমর্থিত নয়।

উৎস

ডকুমেন্ট পিকচার-ইন-পিকচার এপিআই একটি সর্বদা-অন-টপ উইন্ডো খোলা সম্ভব করে যেটি নির্বিচারে HTML বিষয়বস্তু দিয়ে তৈরি করা যেতে পারে। এটি <video> -এর জন্য বিদ্যমান Picture-in-Picture API-কে প্রসারিত করে যা শুধুমাত্র একটি HTML <video> উপাদানকে একটি Picture-in-Picture উইন্ডোতে রাখার অনুমতি দেয়।

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

  • পিকচার-ইন-পিকচার উইন্ডো অন্যান্য উইন্ডোর উপরে ভাসছে।
  • পিকচার-ইন-পিকচার উইন্ডো কখনই খোলার উইন্ডোর বাইরে থাকে না।
  • পিকচার-ইন-পিকচার উইন্ডোটি নেভিগেট করা যাবে না।
  • পিকচার-ইন-পিকচার উইন্ডোর অবস্থান ওয়েবসাইট দ্বারা সেট করা যাবে না।
একটি পিকচার-ইন-পিকচার উইন্ডো সিনটেল ট্রেলার ভিডিও চালাচ্ছে।
ডকুমেন্ট পিকচার-ইন-পিকচার এপিআই ( ডেমো ) দিয়ে তৈরি একটি পিকচার-ইন-পিকচার উইন্ডো।

বর্তমান অবস্থা

ধাপ স্ট্যাটাস
1. ব্যাখ্যাকারী তৈরি করুন সম্পূর্ণ
2. স্পেসিফিকেশনের প্রাথমিক খসড়া তৈরি করুন চলছে
3. প্রতিক্রিয়া সংগ্রহ করুন এবং ডিজাইনের উপর পুনরাবৃত্তি করুন চলছে
4. মূল বিচার সম্পূর্ণ
5. লঞ্চ করুন সম্পূর্ণ (ডেস্কটপ)

কেস ব্যবহার করুন

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

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

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

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

উৎপাদনশীলতা

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

ইন্টারফেস

বৈশিষ্ট্য

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

পদ্ধতি

documentPictureInPicture.requestWindow(options)

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

width
পিকচার-ইন-পিকচার উইন্ডোর প্রাথমিক প্রস্থ সেট করে।
height
পিকচার-ইন-পিকচার উইন্ডোর প্রাথমিক উচ্চতা সেট করে।
disallowReturnToOpener
সত্য হলে পিকচার-ইন-পিকচার উইন্ডোতে "ট্যাবে ফিরে যান" বোতামটি লুকিয়ে রাখে। এটা ডিফল্টরূপে মিথ্যা.
preferInitialWindowPlacement
সত্য হলে পিকচার-ইন-পিকচার উইন্ডোটি তার ডিফল্ট অবস্থান এবং আকারে খুলুন। এটা ডিফল্টরূপে মিথ্যা.

ঘটনা

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 বিকল্পগুলি পছন্দসই পিকচার-ইন-পিকচার উইন্ডোর আকারে সেট করুন। ক্রোম বিকল্প মানগুলিকে আটকে দিতে পারে যদি সেগুলি খুব বড় বা খুব ছোট হয় ব্যবহারকারী-বান্ধব উইন্ডোর আকারের জন্য উপযুক্ত৷

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);
});

পিকচার-ইন-পিকচার উইন্ডোর "ব্যাক টু ট্যাব" বোতামটি লুকান

পিকচার-ইন-পিকচার উইন্ডোতে বোতামটি লুকানোর জন্য যা ব্যবহারকারীকে ওপেনার ট্যাবে ফিরে যেতে দেয়, 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,
  });
});

পিকচার-ইন-পিকচার উইন্ডোটি তার ডিফল্ট অবস্থান এবং আকারে খুলুন

পূর্ববর্তী Picture-in-Picture উইন্ডোর অবস্থান বা আকার পুনরায় ব্যবহার না করার জন্য, 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,
  });
});

পিকচার-ইন-পিকচার উইন্ডোতে স্টাইল শীট কপি করুন

মূল উইন্ডো থেকে সমস্ত 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);
});

পিকচার-ইন-পিকচার উইন্ডো বন্ধ হলে হ্যান্ডেল করুন

পিকচার-ইন-পিকচার উইন্ডোটি কখন বন্ধ হয়ে যায় তা জানার জন্য উইন্ডো "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();

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

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

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

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

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;
}

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

বোতাম এবং নিয়ন্ত্রণ তৈরি করুন এবং ব্যবহারকারীর ইনপুট ইভেন্টগুলিতে প্রতিক্রিয়া জানান যেমন "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);

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

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

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 নিয়ম লিখতে CSS picture-in-picture ডিসপ্লে মোড ব্যবহার করুন যেগুলো শুধুমাত্র তখনই প্রয়োগ করা হয় যখন (অংশের) ওয়েব অ্যাপ পিকচার-ইন-পিকচার মোডে দেখানো হয়। 

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

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

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

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

ডেমো

ভিডিওজেএস প্লেয়ার

আপনি ডকুমেন্ট পিকচার-ইন-পিকচার API VideoJS প্লেয়ার ডেমো দিয়ে খেলতে পারেন। সোর্স কোড চেক আউট করতে ভুলবেন না.

পোমোডোরো

Tomodoro , একটি pomodoro ওয়েব অ্যাপ, উপলভ্য হলে ডকুমেন্ট পিকচার-ইন-পিকচার API-এর সুবিধা নিচ্ছে ( GitHub পুল অনুরোধ দেখুন)।

টমোডোরোর স্ক্রিনশট, একটি পোমোডোরো ওয়েব অ্যাপ।
টমোডোরোতে একটি পিকচার-ইন-পিকচার উইন্ডো।

প্রতিক্রিয়া

পরামর্শ এবং প্রশ্ন সহ GitHub এ সমস্যা ফাইল করুন ।

স্বীকৃতি

জ্যাকব ওয়েন্সের নায়কের ছবি।