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

Jad Joubran

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

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

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

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

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

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

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

আপনার ব্যবহারের পরিকল্পনা করার সময়, এটিকে একটি স্ট্যান্ডার্ড বৈশিষ্ট্যের পরিবর্তে একটি প্রগতিশীল বর্ধন হিসাবে বিবেচনা করুন। এই নিবন্ধে, আপনি সুন্দর অবক্ষয়ের একটি উদাহরণ দেখতে পাবেন।

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

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

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

একজন ছাত্র হিসেবে, আপনি হয়তো মাঝে মাঝে ব্রাউজার প্রিভিউ উইন্ডোটি সর্বাধিক করতে চাইতে পারেন। ডকুমেন্ট পিকচার-ইন-পিকচার 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 হয়, তখন maximize/minimize বোতামের টুলটিপ Enter Picture-in-Picture এবং Exit Picture-in-Picture এর মধ্যে টগল করে। অন্যদিকে, যখন isPipSupported false হয়, তখন ফলব্যাক আচরণটি Maximize এবং Minimize দিয়ে বর্ণনা করা হয়।

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

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

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