প্রকাশিত: ফেব্রুয়ারি 5, 2025
Chrome 120 থেকে, ভিডিও কনফারেন্সিং ওয়েব অ্যাপগুলি স্বয়ংক্রিয়ভাবে একটি পিকচার-ইন-পিকচার উইন্ডো খুলতে পারে যখন ব্যবহারকারী তাদের বর্তমান ট্যাব থেকে ফোকাস স্যুইচ করে। এটি উপস্থাপকদের জন্য উপযোগী যারা একটি নথি উপস্থাপন করার সময় বা অন্যান্য ট্যাব বা উইন্ডো ব্যবহার করার সময় বাস্তব সময়ে অংশগ্রহণকারীদের দেখতে এবং তাদের সাথে যোগাযোগ করতে চান৷ বিস্তারিত জানার জন্য ভিডিও কনফারেন্সিং ওয়েব অ্যাপের জন্য স্বয়ংক্রিয় ছবি-ইন-ছবি দেখুন।
Chrome 134 থেকে, অডিও বা ভিডিও চালায় এমন ওয়েব অ্যাপগুলি স্বয়ংক্রিয়ভাবে পিকচার-ইন-পিকচার মোডে প্রবেশ করতে পারে। এর মানে হল যে ওয়েবে মিউজিক এবং ভিডিও প্লেয়ারগুলি এখন নিরবিচ্ছিন্নভাবে একটি মিনি প্লেয়ার উইন্ডোতে স্যুইচ করতে পারে যখন ব্যবহারকারী ট্যাবগুলি স্যুইচ করে, ম্যানুয়াল অ্যাক্টিভেশনের প্রয়োজনীয়তা দূর করে৷
এই মিডিয়া প্লেব্যাক ব্যবহারের ক্ষেত্রে সমর্থন করার জন্য, Chrome 134 থেকে ডেস্কটপ ওয়েব অ্যাপগুলি একটি ইতিবাচক ব্যবহারকারীর অভিজ্ঞতা নিশ্চিত করতে কয়েকটি বিধিনিষেধ সহ স্বয়ংক্রিয়ভাবে পিকচার-ইন-পিকচারে প্রবেশ করতে পারে। একটি ওয়েব অ্যাপ শুধুমাত্র মিডিয়া প্লেব্যাকের জন্য অটোমেটিক পিকচার-ইন-পিকচারের জন্য যোগ্য যদি এটি নিম্নলিখিত সমস্ত শর্ত পূরণ করে:
নিরাপদ ব্রাউজিং পরিষেবা অনুযায়ী শীর্ষ ফ্রেম URL নিরাপদ।
মিডিয়া শীর্ষ ফ্রেমে বাস করে।
মিডিয়া গত দুই সেকেন্ডের মধ্যে শ্রবণযোগ্য হয়েছে।
মিডিয়া অডিও ফোকাস আছে.
মিডিয়া বাজছে।
"enterpictureinpicture"
অ্যাকশনের জন্য একটি মিডিয়া সেশন অ্যাকশন হ্যান্ডলার নিবন্ধিত হয়েছে।ব্যবহারকারীর মিডিয়া এনগেজমেন্ট ইনডেক্স থ্রেশহোল্ড অতিক্রম করা হয়েছে, এটি নির্দেশ করে যে ব্যবহারকারী ঘন ঘন এই ওয়েব অ্যাপে মিডিয়া ব্যবহার করেন। এটি প্রযোজ্য যদি ব্যবহারকারীর ব্রাউজার সেটিং হয় "ছবি-তে-ছবিতে প্রবেশ করতে জিজ্ঞাসা করতে পারেন"। যদি ব্যবহারকারী স্পষ্টভাবে ওয়েব অ্যাপটিকে ছবি-ইন-ছবিতে প্রবেশ করার অনুমতি দেয়, তবে এই শর্ত প্রযোজ্য হবে না।

বাগ 386193409 ডিবাগিং এবং বাস্তবায়ন সহজ করার জন্য সারফেসিং অবস্থার বাস্তবায়ন ট্র্যাক করে।
মনে রাখবেন যে যদি অন্য পিকচার-ইন-পিকচার উইন্ডো ইতিমধ্যেই খোলা থাকে, তাহলে Chrome স্বয়ংক্রিয়ভাবে পিকচার-ইন-পিকচার ট্রিগার করে না। বিদ্যমান পিকচার-ইন-পিকচার উইন্ডোটি স্বয়ংক্রিয়ভাবে খোলা থাকলে এবং বন্ধ হয়ে গেলে এই নিয়মটি প্রযোজ্য হবে না।
যখন একটি ওয়েব অ্যাপ প্রয়োজনীয়তা পূরণ করে, তখন অন্য ট্যাবে ফোকাস স্যুইচ করা মিডিয়া সেশন অ্যাকশন হ্যান্ডলার কলব্যাক ফাংশনকে ট্রিগার করে "enterpictureinpicture"
অ্যাকশনের জন্য। এটি ওয়েব অ্যাপটিকে ব্যবহারকারীর অঙ্গভঙ্গি ছাড়াই একটি ছবি-ইন-ছবি উইন্ডো খুলতে দেয়৷ ব্যবহারকারীকে একটি অনুমতি ডায়ালগ দিয়ে উপস্থাপন করা হতে পারে, জিজ্ঞাসা করা হয় যে তারা সাইটটিকে প্রতিবার, শুধুমাত্র এইবার, বা কখনই না স্বয়ংক্রিয়ভাবে ছবি-ইন-ছবিতে প্রবেশ করার অনুমতি দিতে চান।

আপনি হয় একটি HTML <video>
উপাদান থেকে একটি পিকচার-ইন-পিকচার উইন্ডো খুলতে <ভিডিও>-এর জন্য পিকচার-ইন-পিকচার API ব্যবহার করতে পারেন, অথবা নির্বিচারে এইচটিএমএল বিষয়বস্তু পূরণ করতে একটি সর্বদা-অন-টপ উইন্ডো খুলতে ডকুমেন্ট পিকচার-ইন-পিকচার API ব্যবহার করতে পারেন। পিকচার-ইন-পিকচার উইন্ডো খোলার সময় ফোকাস করা হয় না এবং পৃষ্ঠাটি আবার দৃশ্যমান হলে স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যায়।
নিম্নলিখিত উদাহরণ আপনাকে দেখায় কিভাবে একটি HTML <video>
উপাদান খেলতে হয় যখন একজন ব্যবহারকারী একটি বোতামে ক্লিক করেন। তারপর, একটি কলব্যাক ফাংশনের সাথে "enterpictureinpicture"
অ্যাকশনের জন্য নিরাপদে একটি মিডিয়া সেশন অ্যাকশন হ্যান্ডলার নিবন্ধন করুন যা একটি পিকচার-ইন-পিকচার উইন্ডো খোলে৷ এই উইন্ডোতে <ভিডিও>-এর জন্য পিকচার-ইন-পিকচার API সহ ভিডিও রয়েছে।
const video = document.querySelector("video");
async function onPlayButtonClick() {
// Play video.
await video.play();
}
try {
// Request video to automatically enter picture-in-picture when eligible.
navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
await video.requestPictureInPicture();
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
ভিডিওজেএস প্লেয়ার ডেমো ব্যবহার করে দেখুন যা ডকুমেন্ট পিকচার-ইন-পিকচার এপিআই প্রদর্শন করে বা ভিডিও মিডিয়া সেশন এবং অডিও মিডিয়া সেশনের নমুনাগুলির সাথে খেলুন।
জড়িত এবং মতামত শেয়ার করুন
আপনার মতামত থাকলে বা কোনো সমস্যার সম্মুখীন হলে, আপনি সেগুলি crbug.com- এ শেয়ার করতে পারেন।
সম্পদ
স্বীকৃতি
বেঞ্জামিন কিন এবং ফ্রাঙ্ক লিবারতোকে তাদের পর্যালোচনার জন্য ধন্যবাদ।