בעקבות ההשקה האחרונה של Document Picture-in-Picture API (ואפילו לפני כן), מפתחי אתרים מעוניינים יותר ויותר באפשרות לפתוח באופן אוטומטי חלון 'תמונה בתוך תמונה' כשהמשתמש מעביר את המיקוד מהכרטיסייה הנוכחית. היכולת הזו שימושית במיוחד באפליקציות אינטרנט של שיחות ועידה בווידאו, שבהן אנשים יכולים לראות את המשתתפים ולקיים איתם אינטראקציה בזמן אמת תוך כדי הצגת מסמך או שימוש בכרטיסיות או בחלונות אחרים.
מעבר אוטומטי למצב 'תמונה בתוך תמונה'
כדי לתמוך בתרחישים לדוגמה האלה של שיחות ועידה בווידאו, אפליקציות האינטרנט של Chrome 120 למחשב יכולות לעבור אוטומטית למצב 'תמונה בתוך תמונה', עם כמה הגבלות כדי להבטיח חוויית משתמש חיובית. אפליקציית אינטרנט יכולה להפעיל את התכונה 'תמונה בתוך תמונה' אוטומטית רק אם היא עומדת בכל התנאים הבאים:
בוצע רישום handler של פעולה בסשן מדיה עבור הפעולה
"enterpictureinpicture".המכשיר קולט את המצלמה או המיקרופון באופן פעיל באמצעות getUserMedia.
המשתמש מאפשר הפעלה אוטומטית של תמונה בתוך תמונה באמצעות הגדרת דפדפן שמופעלת כברירת מחדל.
כשאפליקציית אינטרנט כשירה, פונקציית הקריאה החוזרת (callback) של הפעולה בסשן מדיה עבור הפעולה "enterpictureinpicture" מופעלת כשהמשתמש מעביר את המיקוד לכרטיסייה אחרת, וכך מאפשר לפתוח חלון עם תמונה בתוך תמונה ללא פעולת משתמש.
מפתחי אתרים יכולים להשתמש בממשק API של תמונה בתוך תמונה עבור <video> כדי לפתוח חלון תמונה בתוך תמונה מאלמנט <video> של HTML, או ב-Document Picture-in-Picture API כדי לפתוח חלון שנמצא תמיד העליון על מנת לאכלס תוכן HTML שרירותי. החלון של 'תמונה בתוך תמונה' לא ממוקד כשהוא נפתח ונסגר אוטומטית כשהחשיפה של הדף הופכת שוב לגלויה.
בדוגמה הבאה אפשר לראות איך לבקש גישה למצלמה של המשתמש. לאחר מכן, צריך לרשום בבטחה handler של פעולות בסשן מדיה לפעולה "enterpictureinpicture", באמצעות פונקציית קריאה חוזרת שפותחת חלון עם תמונה בתוך תמונה. החלון הזה מכיל את זרם הווידאו של המצלמה של המשתמש עם ממשק ה-API של 'תמונה בתוך תמונה' עבור <video>.
const video = document.querySelector("video");
// Request access to the user's camera.
navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
video.srcObject = stream;
});
try {
// Request video to automatically enter picture-in-picture when eligible.
navigator.mediaSession.setActionHandler("enterpictureinpicture", () => {
video.requestPictureInPicture();
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
כדאי לנסות את הדוגמה סשן של שיחת ועידה בווידאו.
מעבר למצב 'תמונה בתוך תמונה' מבקרת המדיה של הדפדפן
הפעולה '"enterpictureinpicture"' בסשן המדיה שימושית גם כשהמשתמש רוצה לעבור למצב של תמונה בתוך תמונה באמצעות פקד המדיה בממשק המשתמש של דפדפן Chrome.
אם לא מופעל רכיב HTML <video> אלא רק אודיו, רישום ה-handler של הפעולות בסשן המדיה עבור "enterpictureinpicture" מודיע לדפדפן שאפליקציית האינטרנט יודעת איך לטפל בו ותטפל בפתיחת חלון עם תמונה בתוך תמונה.
היא שימושית גם כשאפליקציית האינטרנט רוצה להשתמש ב-Document Picture-in-Picture API כדי לפתוח חלון של תמונה בתוך תמונה, במקום לאפשר לדפדפן לטפל בו באמצעות 'ממשק API של תמונה בתוך תמונה' עבור <video>.
הדוגמה הבאה ממחישה איך לרשום באופן בטוח handler של פעולות בסשן מדיה עבור הפעולה "enterpictureinpicture". פונקציית הקריאה החוזרת פותחת חלון 'תמונה בתוך תמונה' עם Document Picture-in-Picture API כשהמשתמש נכנס ל'תמונה בתוך תמונה' באמצעות פקד המדיה שבממשק המשתמש של דפדפן Chrome.
try {
// Use the Document Picture-in-Picture API when entering
// picture-in-picture from browser media control.
navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
const pipWindow = await documentPictureInPicture.requestWindow();
// Populate HTML content and handle closing window...
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
נסו את הדגמת נגן VideoJS של Document Picture-in-Picture API או את הדוגמה של סשן מדיה בווידאו.
יצירת מעורבות ושיתוף משוב
אם נתקלתם בבעיות או שאתם רוצים לשלוח משוב, אתם יכולים לשתף אותן בכתובת crbug.com.
משאבים
אימות חתימות
תודה לטומי סטימל, ריאן פלורס, שימי רחים, פרנק ליברטו ורייצ'ל אנדרו על הביקורות שלהם.