תרחישים לדוגמה מעניינים עם Document Picture-in-Picture API

Jad Joubran

תאריך פרסום: 4 במרץ 2025

‫Document Picture-in-Picture API (Document PiP API) מאפשר לאפליקציות אינטרנט לפתוח חלון צף שתמיד מוצג בחזית (חלון תמונה בתוך תמונה) שיכול להציג כל תוכן HTML שרירותי.

ה-API הזה מבוסס על Picture-in-Picture API ל-<video>, שמאפשר לכם להמשיך לצפות בסרטון בחלון PiP.

ממשק ה-API של תמונה בתוך תמונה במסמך יכול להציג כל תוכן HTML שרירותי, ולכן אפשר להשתמש בו כדי לפתוח תרחישי שימוש חדשים ומעניינים.

תמיכה בדפדפן ושיפור הדרגתי

בזמן כתיבת המאמר הזה, הזמינות של Document Picture-in-Picture API מוגבלת.

עם זאת, זה לא אומר שאי אפשר להשתמש בו עם שיפור הדרגתי או התדרדרות הדרגתית.

כשמתכננים את תרחיש השימוש, חשוב להתייחס אליו כאל שיפור מתקדם ולא כאל תכונה רגילה. במאמר הזה נציג דוגמה להשפלה הדרגתית.

שיפור חוויית המשתמש של הלומד באמצעות Document PiP API

‫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.

זהו! עכשיו יש לחצן להגדלה שנפתח בחלון נפרד של תמונה בתוך תמונה.בנוסף להגדלת כרטיסיית התצוגה המקדימה של הדפדפן, אפשר גם להעביר אותה למסך נפרד אם יש לכם צג חיצוני, או אפילו לסדר מחדש את אפליקציית האינטרנט הראשית ואת כרטיסיית התצוגה המקדימה של הדפדפן בפריסת עמודות.

חלופי

חשוב לזכור שהזמינות של ה-API הזה מוגבלת. בדפדפנים ובמכשירים שלא תומכים ב-API הזה, תצטרכו לספק התנהגות חלופית (שדרוג הדרגתי).

במקום שהלחצן להגדלה ימשוך את כל כרטיסיית התצוגה המקדימה של הדפדפן, אפשר להגדיר שהוא יתפוס את כל השטח שנותר באפליקציית האינטרנט הנוכחית.

כדאי לנסות את ההתנהגות הזו בדפדפנים שונים: https://learnhtmlcss.online/app.html?id=2096

אל תשכחו לשים לב לפרטים הקטנים בתיבות הטיפים. כשהערך של isPipSupported הוא true, תיאור הכלי של הלחצן להגדלה או להקטנה משתנה בין כניסה למצב 'תמונה בתוך תמונה' לבין יציאה ממצב 'תמונה בתוך תמונה'. לעומת זאת, אם isPipSupported הוא false, התנהגות ברירת המחדל מתוארת באמצעות Maximize ו-Minimize.

כפי שאפשר לראות, Document Picture-in-Picture API יכול לפתוח תרחישי שימוש חדשים ומעניינים לאפליקציית האינטרנט שלכם בשילוב עם שיפור מתקדם או עם שדרוג הדרגתי.

אל תתנו לתמיכה מוגבלת בדפדפן להגביל אתכם, ואל תשכחו להגדיר תרחיש חלופי סביר לשימוש.

מומלץ לעיין במאמרי העזרה בנושא Document PiP כדי לראות דוגמאות שונות ותרחישי שימוש של ה-API הזה.