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

Jad Joubran

تاریخ انتشار: 4 مارس 2025

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

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

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

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

Browser Support

• 116
• 116
• x
• x

Source

در زمان نگارش، API تصویر در تصویر سند در دسترس محدود است.

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

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

بهبود تجربه کاربری یادگیرنده با Document PiP API

LearnHTMLCSS.online یک پلت فرم یادگیری تعاملی است که HTML و CSS معنایی و قابل دسترس را آموزش می دهد. این یک ویرایشگر متن تعاملی و پنجره پیش نمایش مرورگر را ارائه می دهد.

اسکرین‌کست زیر طرح‌بندی برنامه را نشان می‌دهد. صفحه نمایش به دو ستون تقسیم می شود. ستون اول شامل ویرایشگر کد است. ستون دوم شامل یک طرح بندی زبانه ای است. به طور پیش‌فرض، کاربر می‌تواند دستورالعمل‌های چالش را ببیند و می‌تواند روی تب Browser کلیک کند تا یک پیش‌نمایش زنده را مشاهده کند.

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

---

همانطور که می بینید، Document Picture-in-Picture API می تواند موارد استفاده جدید و هیجان انگیز را برای برنامه وب شما باز کند، زمانی که با بهبود تدریجی یا تخریب زیبا ترکیب شود.

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

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