কিভাবে ভিডিও কন্ট্রোলে পিকচার-ইন-পিকচার যোগ করবেন

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

আধুনিক উপায়

পিকচার-ইন-পিকচার (PiP) ওয়েব এপিআই ওয়েবসাইটগুলোকে অন্যান্য উইন্ডোর উপরে একটি ভাসমান ভিডিও উইন্ডো তৈরি করার সুযোগ দেয়, যাতে ব্যবহারকারীরা তাদের ডিভাইসে অন্যান্য কন্টেন্ট সাইট বা অ্যাপ্লিকেশন ব্যবহার করার সময়েও মিডিয়া উপভোগ করা চালিয়ে যেতে পারেন।

নিচের উদাহরণটি দেখায় কিভাবে এমন একটি বাটন তৈরি করতে হয়, যা ব্যবহার করে ব্যবহারকারীরা একটি ভিডিওতে পিকচার-ইন-পিকচার চালু বা বন্ধ করতে পারবেন।

togglePipButton.addEventListener("click", async (event) => {
  togglePipButton.disabled = true;
  try {
    if (video !== document.pictureInPictureElement) {
      await video.requestPictureInPicture();
    } else {
      await document.exitPictureInPicture();
    }
  } finally {
    togglePipButton.disabled = false;
  }
});

video.addEventListener("enterpictureinpicture", (event) => {
  togglePipButton.classList.add("on");
});

video.addEventListener("leavepictureinpicture", (event) => {
  togglePipButton.classList.remove("on");
});

/* Feature detection */
if ("pictureInPictureEnabled" in document) {
  // Set button ability depending on whether Picture-in-Picture can be used.
  setPipButton();
  video.addEventListener("loadedmetadata", setPipButton);
  video.addEventListener("emptied", setPipButton);
} else {
  // Hide button if Picture-in-Picture is not supported.
  togglePipButton.hidden = true;
}

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

ক্লাসিক উপায়

পিকচার-ইন-পিকচার ওয়েব এপিআই (Picture-in-Picture Web API) সহজলভ্য হওয়ার আগে, অন্য উইন্ডোগুলোর উপরে সবসময় একটি ভাসমান ভিডিও উইন্ডো তৈরি করার কোনো উপায় ছিল না। তবে, সিএসএস (CSS) ব্যবহার করে ওয়েব পেজের অন্যান্য উপাদানের উপরে ভিডিও চালানো সম্ভব।

নিচের উদাহরণটিতে দেখানো হয়েছে, কীভাবে ব্যবহারকারী একটি বাটনে ক্লিক করলে আপনার ওয়েব পেজের নিচের ডান কোণায় অন্যান্য উপাদানের উপরে ভিডিওটি প্রদর্শন করতে হয়।

toggleFakePipButton.addEventListener("click", (event) => {
  video.classList.toggle("fake-pip");
});

/* Place the video in the bottom right corner on top of everything else via CSS. */
video.fake-pip {
  position: fixed;
  z-index: 1000;
  bottom: 10px;
  right: 10px;
}

আরও পড়ুন

এইচটিএমএল 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📺</text></svg>"
    />
    <title>How to add Picture-in-Picture to video controls</title>
  </head>
  <body>
    <h1>How to add Picture-in-Picture to video controls</h1>
    <button id="togglePipButton">Picture-in-Picture</button>
    <button id="toggleFakePipButton">Fake Picture-in-Picture</button>
    <video autoplay muted playsinline loop src="https://storage.googleapis.com/media-session/caminandes/short.mp4"></video>
  </body>
</html>

সিএসএস 


        :root {
  color-scheme: dark light;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}
button:before {
  content: "Enter ";
}
button.on:before {
  content: "Leave ";
}
video {
  display: block;
  margin-top: 10px;
  max-width: 100%;
}
video.fake-pip {
  position: fixed;
  z-index: 1000;
  bottom: 10px;
  right: 10px;
}

জেএস 


        const video = document.querySelector('video');
const togglePipButton = document.querySelector('#togglePipButton');
const toggleFakePipButton = document.querySelector('#toggleFakePipButton');

togglePipButton.addEventListener("click", async (event) => {
  togglePipButton.disabled = true;
  try {
    if (video !== document.pictureInPictureElement) {
      await video.requestPictureInPicture();
    } else {
      await document.exitPictureInPicture();
    }
  } finally {
    togglePipButton.disabled = false;
  }
});

video.addEventListener("enterpictureinpicture", (event) => {
  togglePipButton.classList.add("on");
});

video.addEventListener("leavepictureinpicture", (event) => {
  togglePipButton.classList.remove("on");
});

/* Feature detection */
if ("pictureInPictureEnabled" in document) {
  // Hide fake PiP button if Picture-in-Picture is supported.
  toggleFakePipButton.hidden = true;
  // Set button ability depending on whether Picture-in-Picture can be used.
  setPipButton();
  video.addEventListener("loadedmetadata", setPipButton);
  video.addEventListener("emptied", setPipButton);
} else {
  // Hide button if Picture-in-Picture is not supported.
  togglePipButton.hidden = true;
}

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

/* Fake Picture-in-Picture */
toggleFakePipButton.addEventListener("click", (event) => {
  toggleFakePipButton.classList.toggle("on");
  video.classList.toggle("fake-pip");
});