ডকুমেন্ট পিকচার-ইন-পিকচার এপিআই- এর আগে, শুধুমাত্র একটি পিকচার-ইন-পিকচার উইন্ডোতে একটি 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);
});
}
আরও তথ্যের জন্য শুধুমাত্র <ভিডিও> নয়, যেকোন উপাদানের জন্য পিকচার-ইন-পিকচার দেখুন।
এই পর্যায়ে বিকাশকারীর প্রতিক্রিয়া সত্যিই গুরুত্বপূর্ণ, তাই অনুগ্রহ করে পরামর্শ এবং প্রশ্ন সহ গিটহাবে সমস্যাগুলি ফাইল করুন ।
জ্যাকব ওয়েন্সের নায়কের ছবি।