דף זה תורגם על ידי Cloud Translation API.

תרחישים לדוגמה מעניינים עם 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.

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

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

Browser Support

Source

נכון למועד כתיבת המאמר, הזמינות של 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.

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

חלופי

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

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

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

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

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

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

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