העתיד של 'תמונה בתוך תמונה'

François Beaufort

לפני Document Picture-in-Picture API, אפשר היה להוסיף חלון 'תמונה בתוך תמונה' רק באמצעות רכיב HTML‏ <video>. ה-API החדש הזה מאפשר לפתוח חלון שמוצג תמיד בחלק העליון של המסך, שאפשר לאכלס בתוכן HTML שרירותי. הגרסה זמינה כגרסת מקור לניסיון החל מ-Chrome 111 במחשב.

חלון תמונה בתוך תמונה שנוצר באמצעות Document Picture-in-Picture API (demo).

ה-API החדש מספק הרבה יותר מזה שזמין מ-Picture-in-Picture API for <video> הקיים. לדוגמה, אתם יכולים לספק פקדים ומקורות קלט מותאמים אישית (למשל, כתוביות, פלייליסטים, סרגל זמן, סימון סרטונים בלייק או דיסלייק) כדי לשפר את חוויית המשתמש בנגן הווידאו ב'תמונה בתוך תמונה'.

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

קטע הקוד הבא מראה איך להפעיל או להשבית את התכונה 'תמונה בתוך תמונה' בנגן וידאו מותאם אישית.

async function togglePictureInPicture() {
  // Close Picture-in-Picture window if any.
  if (documentPictureInPicture.window) {
    documentPictureInPicture.window.close();
    return;
  }

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow({
    initialAspectRatio: 640 / 360,
    copyStyleSheets: true,
  });

  // Move video to the Picture-in-Picture window.
  const video = document.querySelector("#video");
  pipWindow.document.body.append(video);

  // Listen for the PiP closing event to move the video back.
  pipWindow.addEventListener("unload", (event) => {
    const videoContainer = document.querySelector("#videoContainer");
    const pipVideo = event.target.querySelector("#video");
    videoContainer.append(pipVideo);
  });
}

לקבלת מידע נוסף, אפשר לעיין במאמר תמונה בתוך תמונה לכל רכיב ולא רק ל-<video>.

המשוב של המפתחים חשוב מאוד בשלב הזה, לכן מומלץ לדווח על בעיות ב-GitHub עם הצעות ושאלות.