ডকুমেন্ট পিকচার-ইন-পিকচার API দিয়ে উত্তেজনাপূর্ণ ব্যবহারের কেস আনলক করুন

Jad Joubran

প্রকাশিত: ৪ মার্চ, ২০২৫

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

এই API-টি <video> এর জন্য Picture-in-Picture API- এর উপর ভিত্তি করে তৈরি, যা আপনাকে একটি PiP উইন্ডোতে ভিডিও দেখা চালিয়ে যেতে দেয়।

যেহেতু ডকুমেন্ট পিআইপি এপিআই যেকোনো এইচটিএমএল কন্টেন্ট প্রদর্শন করতে পারে, তাই এটি ব্যবহার করে আপনি নতুন ও আকর্ষণীয় ব্যবহারের ক্ষেত্র উন্মোচন করতে পারেন।

ব্রাউজার সমর্থন এবং প্রগতিশীল বর্ধন

এই প্রতিবেদন লেখার সময়, ডকুমেন্ট পিকচার-ইন-পিকচার এপিআই-এর প্রাপ্যতা সীমিত।

তবে, প্রগ্রেসিভ এনহ্যান্সমেন্ট বা গ্রেসফুল ডিগ্রেডেশনের সাথে এটি ব্যবহার করতে আপনার কোনো বাধা থাকা উচিত নয়।

আপনার ব্যবহারের ক্ষেত্র (use case) পরিকল্পনা করার সময়, এটিকে একটি সাধারণ বৈশিষ্ট্যের (standard feature) পরিবর্তে একটি প্রগতিশীল উন্নয়ন (progressive enhancement) হিসেবে বিবেচনা করতে ভুলবেন না। এই নিবন্ধে, আপনি মার্জিত অবক্ষয়ের (graceful degradation) একটি উদাহরণ দেখতে পাবেন।

ডকুমেন্ট পিআইপি এপিআই ব্যবহার করে শিক্ষার্থীর ব্যবহারকারীর অভিজ্ঞতা উন্নত করা

LearnHTMLCSS.online হলো একটি ইন্টারেক্টিভ লার্নিং প্ল্যাটফর্ম যা সিম্যান্টিক ও অ্যাক্সেসিবল HTML এবং CSS শেখায়। এটি একটি ইন্টারেক্টিভ টেক্সট এডিটর এবং ব্রাউজার প্রিভিউ উইন্ডো প্রদান করে।

নিম্নলিখিত স্ক্রিনকাস্টটিতে অ্যাপটির লেআউট দেখানো হয়েছে; স্ক্রিনটি দুটি কলামে বিভক্ত। প্রথম কলামে কোড এডিটর রয়েছে। দ্বিতীয় কলামে একটি ট্যাবযুক্ত লেআউট রয়েছে। ডিফল্টরূপে, ব্যবহারকারী চ্যালেঞ্জের নির্দেশাবলী দেখতে পারেন এবং লাইভ প্রিভিউ দেখার জন্য ব্রাউজার ট্যাবে ক্লিক করতে পারেন।

একজন শিক্ষার্থী হিসেবে, আপনি মাঝে মাঝে ব্রাউজার প্রিভিউ উইন্ডোটি ম্যাক্সিমাইজ করতে চাইতে পারেন। ডকুমেন্ট পিকচার-ইন-পিকচার এপিআই (Document Picture-in-Picture API)-এর জন্য সাপোর্ট যোগ করার এটি একটি চমৎকার সুযোগ।

এটি বাস্তবায়ন করতে, প্রথমে ব্রাউজারের সমর্থন যাচাই করে নিন:

const isPipSupported = "documentPictureInPicture" in window;

এখন আপনি এই ভেরিয়েবলটি যেকোনো documentPictureInPicture কলকে র‍্যাপ করতে, অথবা Document PiP-এর উপর নির্ভরশীল কোনো ফাংশন থেকে সময়ের আগেই রিটার্ন করতে ব্যবহার করতে পারেন। নিচের কোডটি প্রথমে Document PiP সাপোর্ট আছে কিনা তা পরীক্ষা করে, তারপর একটি Document PiP উইন্ডো খোলে।

async function initDocumentPip() {
  if (!isPipSupported) {
    return false;
  }

  const pipWindow = await documentPictureInPicture.requestWindow({
    width: window.innerWidth,
    height: window.innerHeight,
  });
}

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

এখন পর্যন্ত, আপনার কাছে একটি খালি ডকুমেন্ট আছে। এখন আপনাকে এটিতে বিষয়বস্তু যোগ করতে হবে।

// htmlCode is the HTML code of the challenge
pipWindow.document.documentElement.innerHTML = htmlCode;

CSS কোডে কোনো সমস্যা হলে, আপনাকে CSS সিঙ্কও করতে হবে।

ব্যাস! এখন আপনার একটি ম্যাক্সিমাইজ বাটন আছে যা একটি আলাদা PiP উইন্ডোতে খোলে। ব্রাউজার প্রিভিউ ট্যাবটি ম্যাক্সিমাইজ করার পাশাপাশি, আপনার যদি একটি এক্সটার্নাল মনিটর থাকে তবে আপনি এটিকে একটি আলাদা স্ক্রিনেও সরাতে পারেন, অথবা মূল ওয়েব অ্যাপ এবং ব্রাউজার প্রিভিউ ট্যাবটিকে একটি কলাম লেআউটে পুনর্বিন্যাসও করতে পারেন।

ফলব্যাক

মনে রাখবেন যে এই API-টির প্রাপ্যতা সীমিত। যেসব ব্রাউজার এবং ডিভাইসে এই API-টি সমর্থিত নয়, সেখানে আপনাকে একটি ফলব্যাক (গ্রেসফুল ডিগ্রেডেশন) আচরণ প্রদান করতে হবে।

ম্যাক্সিমাইজ বাটন দিয়ে পুরো ব্রাউজার প্রিভিউ ট্যাবটি বের করে আনার পরিবর্তে, আমরা এটিকে বর্তমান ওয়েব অ্যাপের বাকি সমস্ত জায়গা জুড়ে নিতে দিতে পারি।

বিভিন্ন ব্রাউজারে এই আচরণটি পরীক্ষা করে দেখুন: https://learnhtmlcss.online/app.html?id=2096

টুলটিপগুলোর ছোট ছোট খুঁটিনাটির দিকে মনোযোগ দিতে ভুলবেন না। যখন isPipSupported true হয়, তখন ম্যাক্সিমাইজ/মিনিমাইজ বাটনের টুলটিপটি 'Enter Picture-in-Picture' এবং 'Exit Picture-in-Picture'- এর মধ্যে টগল করে। অন্যদিকে, যখন isPipSupported false হয়, তখন ফলব্যাক আচরণটি 'Maximize' এবং 'Minimize' দ্বারা বর্ণনা করা হয়।

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

ব্রাউজারের সীমিত সমর্থনের কারণে নিজেকে সীমাবদ্ধ হতে দেবেন না, এবং একটি উপযুক্ত বিকল্প ব্যবহারের ব্যবস্থা রাখতে ভুলবেন না।

এই API-এর বিভিন্ন উদাহরণ ও ব্যবহার সম্পর্কে জানতে Document PiP-এর ডকুমেন্টেশন দেখুন।