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

François Beaufort

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

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

ה-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 עם הצעות ושאלות.

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