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

François Beaufort

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

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

ה-API החדש מספק הרבה יותר מזה שזמין ב-Picture-in-Picture API של <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 בצירוף הצעות ושאלות.

תמונה ראשית (Hero) מאת Jakob Owens.