আরও সাইটে স্বয়ংক্রিয়ভাবে ভিডিও পিকচার-ইন-পিকচার চালু করুন।

বেঞ্জামিন কিন
Benjamin Keen
ফ্রাঁসোয়া বোফোর্ট
François Beaufort
GitHub

প্রকাশিত: ১৮ মার্চ, ২০২৬

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

নির্বিঘ্ন মিডিয়া মাল্টিটাস্কিং অভিজ্ঞতা প্রদান করতে এবং পিকচার-ইন-পিকচার (PiP)-এর সহজলভ্যতা বাড়াতে, ক্রোম ব্রাউজার-চালিত অটো PiP চালু করেছে। এই ফিচারটি ক্রোমকে এমন সাইটগুলির জন্য স্বয়ংক্রিয়ভাবে একটি ভিডিও PiP উইন্ডো খুলতে দেয়, যেগুলি কোনো মিডিয়া সেশন অ্যাকশন হ্যান্ডলার রেজিস্টার করেনি। এটি নিশ্চিত করে যে আপনি ট্যাব পরিবর্তন করলেও আপনার মিডিয়া কন্টেন্ট দৃশ্যমান থাকে।

নির্দেশাবলী

  • ডেস্কটপে ক্রোম ১৪২ বা তার পরবর্তী সংস্করণ ব্যবহার করুন।
  • chrome://flags/#browser-initiated-automatic-picture-in-picture in picture" বিকল্পটি চালু করুন এবং Chrome পুনরায় চালু করুন।
  • একটি ভিডিও ওয়েবসাইটে যান এবং একটি ভিডিও চালান ( উদাহরণ )।
  • ভিডিও PiP উইন্ডো চালু করতে অন্য একটি Chrome ট্যাবে যান।

এটি কীভাবে কাজ করে

যখন আপনি মিডিয়া প্লে করে অন্য ট্যাবে যান, তখন ক্রোম স্বয়ংক্রিয়ভাবে মিডিয়াটিকে একটি সর্বদা-উপরে থাকা ভিডিও PiP উইন্ডোতে সরিয়ে দিতে পারে। বিদ্যমান 'মিডিয়া প্লেব্যাকের জন্য অটো PiP ফিচার'-এর থেকে ভিন্ন, যা ভিডিও অথবা যেকোনো HTML কন্টেন্ট ( ডকুমেন্ট পিকচার-ইন-পিকচার এপিআই ব্যবহার করে) সাপোর্ট করে, ব্রাউজার থেকে পাঠানো অনুরোধগুলো সবসময় একটি স্ট্যান্ডার্ড ভিডিও PiP উইন্ডো খোলে।

উচ্চ-মানের এবং নির্বিঘ্ন ব্যবহারকারীর অভিজ্ঞতা নিশ্চিত করতে, ক্রোম শুধুমাত্র কিছু কঠোর শর্ত পূরণ হলেই এই আচরণটি সক্রিয় করে:

  • সেফ ব্রাউজিং পরিষেবা অনুসারে শীর্ষ ফ্রেমের ইউআরএলটি নিরাপদ।
  • মিডিয়াটি উপরের ফ্রেমে রয়েছে।
  • গত দুই সেকেন্ডের মধ্যে গণমাধ্যমের কথা শোনা গেছে।
  • মিডিয়াটিতে অডিও ফোকাস রয়েছে এবং এটি চলছে।
  • একটিমাত্র “সাধারণ” প্লেয়ার রয়েছে, অর্থাৎ, একটি আনমিউটেড মিডিয়া এলিমেন্ট যা প্লে হয়েছে এবং MediaStream ব্যবহার করছে না।
  • মিডিয়া এলিমেন্টটিতে অবশ্যই একটি ভিডিও ট্র্যাক থাকতে হবে।
  • সাইটটি সক্রিয়ভাবে ক্যামেরা বা মাইক্রোফোন ব্যবহার করছে না।
  • ব্যবহারকারীর মিডিয়া এনগেজমেন্ট ইনডেক্স থ্রেশহোল্ড অতিক্রম করা হয়েছে, যা সাইটটির ঘন ঘন ব্যবহার নির্দেশ করে। এই অবস্থাটি প্রযোজ্য হবে যদি ব্যবহারকারী স্পষ্টভাবে ফিচারটির অনুমতি বা অস্বীকৃতি না দিয়ে থাকেন।
  • বর্তমানে কোনো PiP উইন্ডো খোলা নেই। যদি অন্য কোনো PiP উইন্ডো আগে থেকেই খোলা থাকে, তাহলে Chrome স্বয়ংক্রিয়ভাবে উইন্ডো পরিবর্তন করে না।
ব্রাউজার-প্রবর্তিত অটো পিআইপি (যেখানে সাইটে enterpictureinpicture অ্যাকশন হ্যান্ডলার নেই) এবং মিডিয়া প্লেব্যাকের জন্য অটো পিআইপি (যেখানে সাইটটি হ্যান্ডলারটি রেজিস্টার করেছে)-এর তুলনা।

ব্যবহারকারীর নিয়ন্ত্রণ এবং গোপনীয়তা

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

ব্যবহারকারীরা " সাইট সেটিংস "-এর মাধ্যমে যেকোনো সময় এই অনুমতিগুলি পরিচালনা করতে পারেন।

ডেভেলপার নিয়ন্ত্রণ এবং অপ্ট-আউট

যদিও এই ফিচারটি বেশিরভাগ ভিডিও সাইটের জন্য স্বয়ংক্রিয়ভাবে কাজ করার জন্য ডিজাইন করা হয়েছে, আপনি চাইলে এই আচরণটি বন্ধ বা নিষ্ক্রিয় করতে পারেন।

আপনার নিজস্ব হ্যান্ডলার প্রয়োগ করুন

যদি আপনার ওয়েব অ্যাপে enterpictureinpicture অ্যাকশনের জন্য আগে থেকেই একটি মিডিয়া সেশন অ্যাকশন হ্যান্ডলার রেজিস্টার করা থাকে, তাহলে আপনার ইমপ্লিমেন্টেশনটি অগ্রাধিকার পাবে এবং ক্রোম তার নিজস্ব স্বয়ংক্রিয় ট্রানজিশন শুরু করবে না।

ক্রোম যখন কোনো ট্রানজিশনকে উপযুক্ত মনে করে, তখন তার আচরণ কাস্টমাইজ করতে চাইলে, enterpictureinpicture অ্যাকশন হ্যান্ডলারটি MediaSessionActionDetails এ একটি reason অন্তর্ভুক্ত করে। reason contentoccluded কি না (যার অর্থ ট্যাবটি লুকানো থাকায় ব্রাউজার অনুরোধটি শুরু করেছে) তা আপনি যাচাই করে পরবর্তী পদক্ষেপ সম্পর্কে সিদ্ধান্ত নিতে পারেন।

navigator.mediaSession.setActionHandler("enterpictureinpicture", (details) => {
  if (details.reason === "contentoccluded") {
    // The browser suggests entering Picture-in-Picture.
    // You can choose to open a standard video PiP or a Document PiP window, or do
    // nothing (effectively blocking browser-initiated Auto Picture-in-Picture).
  }
});

মিডিয়া সেশনের জন্য সর্বোত্তম অনুশীলন

ব্রাউজার-চালিত অটো পিআইপি (Auto PiP)-এর মাধ্যমে, আপনার মিডিয়া সেশন কনফিগারেশন ক্রোমকে আপনার কন্টেন্ট বুঝতে এবং তার সাথে ইন্টারঅ্যাক্ট করতে সাহায্য করে। একটি সু-কনফিগার করা MediaSession নিশ্চিত করে যে পিআইপি উইন্ডোটি ব্যবহারকারীদের জন্য সঠিক নিয়ন্ত্রণ এবং তথ্যসহ একটি উচ্চ-মানের অভিজ্ঞতা প্রদান করে।

অগ্রগতি বারটি সিঙ্কে রাখুন

যদি setPositionState API ব্যবহার করা হয় এবং মিডিয়া সেশনের অবস্থান সঠিকভাবে আপডেট না করা হয়, তাহলে মিডিয়া প্লেব্যাকের সময় PiP উইন্ডোতে একটি ভুল প্রোগ্রেস বার দেখা যায়। এটি প্রতিরোধ করতে, প্রয়োজন অনুযায়ী (উদাহরণস্বরূপ, যখন মিডিয়া সোর্স পরিবর্তিত হয় বা রিসেট করা হয়) navigator.mediaSession.setPositionState() ব্যবহার করে সর্বদা position state আপডেট বা আনসেট করুন, যাতে PiP উইন্ডোটি প্লে হওয়া মিডিয়ার সঠিক অবস্থান প্রতিফলিত করে।

const video = document.querySelector('video');

function updatePositionState() {
  if ('setPositionState' in navigator.mediaSession) {
    navigator.mediaSession.setPositionState({
      duration: video.duration,
      playbackRate: video.playbackRate,
      position: video.currentTime,
    });
  }
}

// Update when metadata is loaded or when seeking happens.
video.addEventListener("loadedmetadata", updatePositionState);
video.addEventListener("seeked", updatePositionState);

পরিবর্তনগুলো সাবলীলভাবে সামলান।

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

সম্পূর্ণ নিয়ন্ত্রণ সক্ষম করুন

সাধারণ প্লে এবং পজের বাইরে, seekto , previoustrack , এবং nexttrack জন্য হ্যান্ডলার প্রয়োগ করার কথা বিবেচনা করুন। এর ফলে ব্যবহারকারীরা মূল ট্যাবে ফিরে না গিয়েই সরাসরি PiP উইন্ডো থেকে আপনার কন্টেন্টে নেভিগেট করতে পারবেন।

navigator.mediaSession.setActionHandler("seekto", (details) => {
  if (details.fastSeek && "fastSeek" in video) {
    video.fastSeek(details.seekTime);
    return;
  }
  video.currentTime = details.seekTime;
});

অংশগ্রহণ করুন এবং মতামত জানান

এই আচরণটি সম্পর্কে আপনার কোনো মতামত থাকলে বা কোনো সমস্যা চোখে পড়লে, তা crbug.com- এ জানান।

রিসোর্স