תאריך פרסום: 5 בפברואר 2025
בגרסה 120 של Chrome, אפליקציות אינטרנט לפגישות וידאו יכולות לפתוח באופן אוטומטי חלון 'תמונה בתוך תמונה' כשהמשתמש מעביר את המיקוד מהכרטיסייה הנוכחית. התכונה הזו שימושית למשתתפים שמשתפים את המסך ומעוניינים לראות את המשתתפים ולנהל איתם אינטראקציה בזמן אמת, בזמן שהם מציגים מסמך או משתמשים בכרטיסיות או בחלונות אחרים. פרטים נוספים זמינים במאמר הפעלה אוטומטית של 'תמונה בתוך תמונה' באפליקציות אינטרנט לשיחות ועידה בווידאו.
בגרסה 134 של Chrome, אפליקציות אינטרנט שמפעילות אודיו או וידאו יכולות להיכנס למצב 'תמונה בתוך תמונה' באופן אוטומטי. כלומר, נגני מוזיקה וסרטונים באינטרנט יכולים עכשיו לעבור בצורה חלקה לחלון נגן מיני כשהמשתמש עובר בין כרטיסיות, וכך אין צורך בהפעלה ידנית.
כדי לתמוך בתרחישי השימוש האלה של הפעלת מדיה, החל מ-Chrome 134 אפליקציות אינטרנט למחשב יכולות לעבור באופן אוטומטי לתצוגה של תמונה בתוך תמונה, עם כמה הגבלות כדי להבטיח חוויית משתמש חיובית. אפליקציית אינטרנט עומדת בדרישות להפעלה אוטומטית של התכונה 'תמונה בתוך תמונה' להפעלת מדיה רק אם היא עומדת בכל התנאים הבאים:
כתובת ה-URL של המסגרת העליונה בטוחה, לפי שירות הגלישה הבטוחה.
המדיה נמצאת בפריים העליון.
המדיה הייתה נשמעת בשתי השניות האחרונות.
האודיו של המדיה ממוקד.
המדיה מופעלת.
נרשם טיפול בפעולת סשן מדיה עבור הפעולה
"enterpictureinpicture"
.חרגתם מהסף של מדד ההתעניינות של המשתמש בתוכן מדיה, מה שמצביע על כך שהמשתמש צורך מדיה בתדירות גבוהה באפליקציית האינטרנט הזו. המצב הזה רלוונטי אם הגדרת הדפדפן של המשתמש היא'יכול לבקש להיכנס למצב'תמונה בתוך תמונה''. אם המשתמש מאפשר לאפליקציית האינטרנט להיכנס למצב 'תמונה בתוך תמונה' באופן מפורש, התנאי הזה לא חל.
![ההגדרה האוטומטית של 'תמונה בתוך תמונה' בחלונית פרטי האתר בדפדפן Chrome.](https://developer.chrome.com/static/blog/automatic-picture-in-picture-media-playback/image/browser-setting.jpg?authuser=8&hl=he)
באג 386193409 עוקב אחרי ההטמעה של התנאים להצגת מודעות כדי להקל על ניפוי הבאגים ועל ההטמעה.
חשוב לזכור שאם חלון אחר של 'תמונה בתוך תמונה' כבר פתוח, Chrome לא מפעיל את התכונה 'תמונה בתוך תמונה' באופן אוטומטי. הכלל הזה לא חל אם חלון התמונה בתוך התמונה הקיים נפתח באופן אוטומטי ועומדים לסגור אותו.
כשאפליקציית אינטרנט עומדת בדרישות, העברת המיקוד לכרטיסייה אחרת מפעילה את פונקציית הקריאה החוזרת של בורר הפעולות של סשן המדיה עבור הפעולה "enterpictureinpicture"
. כך אפליקציית האינטרנט יכולה לפתוח חלון 'תמונה בתוך תמונה' בלי שהמשתמש יבצע תנועה. לאחר מכן, יכול להיות שיוצג למשתמש תיבת דו-שיח עם בקשה להרשאה, שבה הוא יתבקש לאפשר לאתר להיכנס למצב 'תמונה בתוך תמונה' באופן אוטומטי בכל פעם, רק הפעם או אף פעם.
![שכבת-על של הרשאה בחלון 'תמונה בתוך תמונה', שמבקשת מהמשתמש אם הוא רוצה לאפשר לאתר להיכנס למצב 'תמונה בתוך תמונה' באופן אוטומטי.](https://developer.chrome.com/static/blog/automatic-picture-in-picture-media-playback/image/pip-window-popup.jpg?authuser=8&hl=he)
אפשר להשתמש ב-Picture-in-Picture API עבור <video> כדי לפתוח חלון מסוג 'תמונה בתוך תמונה' מרכיב HTML <video>
, או ב-Document Picture-in-Picture API כדי לפתוח חלון שתמיד מופיע בחלק העליון של המסך, שאפשר לאכלס בתוכן HTML שרירותי. כשהחלון עם התמונה בתוך התמונה נפתח, הוא לא ממוקד, והוא נסגר באופן אוטומטי כשהדף שוב גלוי.
בדוגמה הבאה מוסבר איך להפעיל רכיב HTML <video>
כשמשתמש לוחץ על לחצן. לאחר מכן, צריך לרשום בבטחה בורר פעולות של סשן מדיה לפעולה "enterpictureinpicture"
עם פונקציית קריאה חוזרת (callback) שפותחת חלון 'תמונה בתוך תמונה'. החלון הזה מכיל את הסרטון עם Picture-in-Picture API עבור <video>.
const video = document.querySelector("video");
async function onPlayButtonClick() {
// Play video.
await video.play();
}
try {
// Request video to automatically enter picture-in-picture when eligible.
navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
await video.requestPictureInPicture();
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
אתם יכולים לנסות את הדמו של נגן VideoJS, שבו מוצג Document Picture-in-Picture API, או לשחק עם הדוגמאות של סשן מדיה של וידאו ושל סשן מדיה של אודיו.
יצירת מעורבות ושיתוף משוב
אם יש לכם משוב או נתקלתם בבעיות, אתם יכולים לשתף אותם בכתובת crbug.com.
משאבים
אימות חתימות
תודה ל-Benjamin Keen ול-Frank Liberato על הביקורות שלהם.