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

Jad Joubran

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

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

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

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

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

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

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

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

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

‫LearnHTMLCSS.online היא פלטפורמת למידה אינטראקטיבית שמלמדת HTML ו-CSS סמנטיים ונגישים. הפלטפורמה מציעה כלי לעריכת טקסט אינטראקטיבי וחלון תצוגה מקדימה בדפדפן.

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

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

כדי להטמיע את התכונה הזו, קודם צריך לבדוק אם הדפדפן תומך בה:

const isPipSupported = "documentPictureInPicture" in window;

עכשיו אפשר להשתמש במשתנה הזה כדי לעטוף קריאות ל-documentPictureInPicture, או כדי לחזור מוקדם מפונקציה שמסתמכת על תמונה בתוך תמונה של מסמך. הקוד הבא בודק אם יש תמיכה ב-PiP של מסמכים, ואז פותח חלון 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, תיאור הכלי משתנה בין הגדלה לבין הקטנה.

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

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

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