הפעלה אוטומטית של תמונה בתוך תמונה בסרטונים באתרים נוספים

Benjamin Keen

François Beaufort

תאריך פרסום: 18 במרץ 2026

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

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

הוראות

להשתמש ב-Chrome 142 או בגרסה מתקדמת יותר במחשב.
מפעילים את ההגדרה 'הפעלה אוטומטית של תמונה בתוך תמונה בדפדפן' ב-chrome://flags/#browser-initiated-automatic-picture-in-picture ומפעילים מחדש את Chrome.
עוברים לאתר עם סרטון ומפעילים אותו (דוגמה).
עוברים לכרטיסיית Chrome אחרת כדי להפעיל חלון של תמונה בתוך תמונה של סרטון.

איך זה עובד

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

כדי להבטיח חוויית משתמש באיכות גבוהה שלא מפריעה לשימוש, Chrome מפעיל את ההתנהגות הזו רק כשמתקיימים קבוצה מחמירה של תנאים:

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

השוואה בין הפעלה אוטומטית של תמונה בתוך תמונה (PiP) שהופעלה על ידי הדפדפן (באתר ללא enterpictureinpicture handler של פעולה) לבין הפעלה אוטומטית של תמונה בתוך תמונה (PiP) להפעלת מדיה (באתר שבו ה-handler רשום).

שליטה של המשתמשים ופרטיות

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

המשתמשים יכולים גם לנהל את ההרשאות האלה בכל שלב דרך הגדרות האתר.

שליטה של מפתחים וביטול הסכמה

התכונה הזו מיועדת לפעול באופן אוטומטי ברוב האתרים עם סרטונים, אבל אפשר לבטל את ההסכמה לשימוש בה.

הטמעה של handler משלכם

אם אפליקציית האינטרנט שלכם כבר רושמת את handler של פעולת סשן המדיה עבור הפעולה enterpictureinpicture, ההטמעה שלכם קודמת, ו-Chrome לא יתחיל מעבר אוטומטי משלו.

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

navigator.mediaSession.setActionHandler("enterpictureinpicture", (details) => {
  if (details.reason === "contentoccluded") {
    // The browser suggests entering Picture-in-Picture.
    // You can choose to open a standard video PiP or a Document PiP window, or do
    // nothing (effectively blocking browser-initiated Auto Picture-in-Picture).
  }
});

שיטות מומלצות להפעלת סשן מדיה

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

שמירה על סנכרון של סרגל ההתקדמות

אם נעשה שימוש ב-API‏ setPositionState והמיקום בסשן המדיה לא מתעדכן בצורה תקינה, חלונות ה-PiP מציגים סרגל התקדמות לא מדויק במהלך הפעלת המדיה. כדי למנוע זאת, צריך תמיד לעדכן או לבטל את ההגדרה של position state באמצעות navigator.mediaSession.setPositionState() לפי הצורך (לדוגמה, כשמקור המדיה משתנה או מאופס), כדי שמיקום חלון התמונה בתוך התמונה ישקף את המיקום הנכון של המדיה שמופעלת.

const video = document.querySelector('video');

function updatePositionState() {
  if ('setPositionState' in navigator.mediaSession) {
    navigator.mediaSession.setPositionState({
      duration: video.duration,
      playbackRate: video.playbackRate,
      position: video.currentTime,
    });
  }
}

// Update when metadata is loaded or when seeking happens.
video.addEventListener("loadedmetadata", updatePositionState);
video.addEventListener("seeked", updatePositionState);

איך לטפל במעברים בצורה חלקה

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

הפעלת שליטה מלאה

בנוסף להפעלה ולהשהיה בסיסיות, כדאי להטמיע אמצעי טיפול ב-seekto, ב-previoustrack וב-nexttrack. כך המשתמשים יכולים לנווט בתוכן שלכם ישירות מחלון התמונה בתוך תמונה בלי לחזור לכרטיסייה המקורית.

navigator.mediaSession.setActionHandler("seekto", (details) => {
  if (details.fastSeek && "fastSeek" in video) {
    video.fastSeek(details.seekTime);
    return;
  }
  video.currentTime = details.seekTime;
});

אינטראקציה ושיתוף משוב

אם יש לכם משוב או שנתקלתם בבעיות בהתנהגות הזו, אתם יכולים לשתף אותם בכתובת crbug.com.

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