قفل موارد استفاده هیجان انگیز را با Document Picture-in-Picture API باز کنید

جاد جبران

منتشر شده: ۴ مارس ۲۰۲۵

رابط برنامه‌نویسی کاربردی تصویر در تصویر اسناد (Document PiP API) به برنامه‌های وب اجازه می‌دهد تا یک پنجره شناور و همیشه در بالا (یک پنجره تصویر در تصویر) باز کنند که می‌تواند هر محتوای HTML دلخواهی را نمایش دهد.

این API بر پایه API تصویر در تصویر برای <video> ساخته شده است، که به شما امکان می‌دهد به تماشای ویدیو در یک پنجره PiP ادامه دهید.

از آنجایی که API مربوط به Document PiP می‌تواند هر محتوای HTML دلخواهی را نمایش دهد، می‌توانید از آن برای باز کردن موارد استفاده جدید و هیجان‌انگیز استفاده کنید.

پشتیبانی از مرورگرها و بهبودهای تدریجی

Browser Support

  • کروم: ۱۱۶.
  • لبه: ۱۱۶.
  • پیش‌نمایش فناوری فایرفاکس: پشتیبانی می‌شود.
  • سافاری: پشتیبانی نمی‌شود.

Source

در زمان نگارش این مطلب، API تصویر در تصویر اسناد (Document Picture-in-Picture API) دسترسی محدودی دارد.

با این حال، این نباید شما را از استفاده از آن با بهبود تدریجی یا تخریب دلپذیر باز دارد.

هنگام برنامه‌ریزی مورد استفاده خود، مطمئن شوید که آن را به عنوان یک پیشرفت تدریجی و نه یک ویژگی استاندارد در نظر بگیرید. در این مقاله، نمونه‌ای از تخریب دلپذیر را مشاهده خواهید کرد.

بهبود تجربه کاربری زبان‌آموز با استفاده از Document PiP 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 تصویر در تصویر سند می‌تواند موارد استفاده جدید و هیجان‌انگیزی را برای برنامه وب شما در صورت ترکیب با بهبود تدریجی یا تخریب دلپذیر، ایجاد کند.

نگذارید پشتیبانی محدود مرورگرها شما را محدود کند، و فراموش نکنید که یک مورد استفاده جایگزین مناسب داشته باشید.

برای بررسی مثال‌های مختلف و موارد استفاده از این API ، مستندات Document PiP را بررسی کنید.