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

জাদ জোবরান

প্রকাশিত: মার্চ 4, 2025

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

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

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

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

Browser Support

  • ক্রোম: 116।
  • প্রান্ত: 116।
  • ফায়ারফক্স: সমর্থিত নয়।
  • সাফারি: সমর্থিত নয়।

Source

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

যাইহোক, এটি আপনাকে প্রগতিশীল বর্ধন বা করুণ অবক্ষয়ের সাথে এটি ব্যবহার করা থেকে বিরত করবে না।

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

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

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

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

একজন ছাত্র হিসাবে, আপনি হয়তো কখনো কখনো ব্রাউজার প্রিভিউ উইন্ডোকে বড় করতে চাইতে পারেন। ডকুমেন্ট পিকচার-ইন-পিকচার API-এর জন্য সমর্থন যোগ করার জন্য এটি একটি নিখুঁত সুযোগ।

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

const isPipSupported = "documentPictureInPicture" in window;

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

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 বাটনের টুলটিপ এন্টার Picture-in-Picture এবং Picture-in-Picture প্রস্থানের মধ্যে টগল করে। অন্যদিকে, যখন isPipSupported false হয়, তখন ফলব্যাক আচরণটি Maximize এবং Minimize দিয়ে বর্ণনা করা হয়।

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

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

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