পিকচার-ইন-পিকচারের ভবিষ্যৎ

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

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

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

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

পিকচার-ইন-পিকচারে একটি সম্পূর্ণ নথি সহ, ভিডিও কনফারেন্সিং ওয়েব অ্যাপগুলি ক্যানভাস হ্যাকগুলির উপর নির্ভর না করেই একটি একক পিকচার-ইন-পিকচার উইন্ডোতে একাধিক ভিডিও স্ট্রীমকে একত্রিত করতে পারে৷ তারা কাস্টম নিয়ন্ত্রণও প্রদান করতে পারে যেমন একটি বার্তা পাঠানো, অন্য ব্যবহারকারীকে নিঃশব্দ করা বা হাত তোলা।

নিম্নলিখিত কোড স্নিপেট আপনাকে দেখায় কিভাবে একটি কাস্টম ভিডিও প্লেয়ারের জন্য পিকচার-ইন-পিকচার টগল করতে হয়।

async function togglePictureInPicture() {
  // Close Picture-in-Picture window if any.
  if (documentPictureInPicture.window) {
    documentPictureInPicture.window.close();
    return;
  }

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow({
    initialAspectRatio: 640 / 360,
    copyStyleSheets: true,
  });

  // Move video to the Picture-in-Picture window.
  const video = document.querySelector("#video");
  pipWindow.document.body.append(video);

  // Listen for the PiP closing event to move the video back.
  pipWindow.addEventListener("unload", (event) => {
    const videoContainer = document.querySelector("#videoContainer");
    const pipVideo = event.target.querySelector("#video");
    videoContainer.append(pipVideo);
  });
}

আরও তথ্যের জন্য শুধুমাত্র <ভিডিও> নয়, যেকোন উপাদানের জন্য পিকচার-ইন-পিকচার দেখুন।

এই পর্যায়ে বিকাশকারীর প্রতিক্রিয়া সত্যিই গুরুত্বপূর্ণ, তাই অনুগ্রহ করে পরামর্শ এবং প্রশ্ন সহ গিটহাবে সমস্যাগুলি ফাইল করুন

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