מאז אפריל 2017, דפדפן Chrome ל-Android O תומך ב'תמונה בתוך תמונה'.
היא מאפשרת למשתמשים להפעיל רכיב <video> בחלון שכבת-על קטן שלא חסום על ידי חלונות אחרים, כדי שיוכלו לצפות בו בזמן שהם מבצעים פעולות אחרות.
ככה זה עובד: פותחים את Chrome, עוברים לאתר שמכיל סרטון ומפעילים אותו במסך מלא. לאחר מכן, לוחצים על הלחצן הראשי כדי לעבור למסך הבית של Android, והסרטון מופעל באופן אוטומטי לעבור למצב 'תמונה בתוך תמונה'. זה הכול! מגניב, נכון?
כן, אבל מה לגבי מחשב שולחני? מה אם האתר רוצה לשלוט בחוויה הזו?
החדשות הטובות הן שהמפרט של picture-in-Picture Web API נכתב בזמן שאנחנו מדברים. מטרת המפרט הזה היא לאפשר לאתרים להתחיל להשתמש בהתנהגות הזו ולשלוט בה, באמצעות חשיפת קבוצת המאפיינים הבאה ל-API:
- שליחת התראה לאתר בכל פעם שסרטון נכנס למצב 'תמונה בתוך תמונה' ויוצא ממנו.
- האתר יכול להפעיל מצב 'תמונה בתוך תמונה' על רכיב וידאו באמצעות תנועת משתמש.
- מאפשרים לאתר לצאת ממצב 'תמונה בתוך תמונה'.
- מאפשרים לאתר לבדוק אם אפשר להפעיל את התכונה 'תמונה בתוך תמונה'.
כך זה אמור להיראות:
<video id="video" src="https://example.com/file.mp4"></video>
<button id="pipButton"></button>
<script>
// Hide button if Picture-in-Picture is not supported.
pipButton.hidden = !document.pictureInPictureEnabled;
pipButton.addEventListener('click', function() {
// If there is no element in Picture-in-Picture yet, let's request Picture
// In Picture for the video, otherwise leave it.
if (!document.pictureInPictureElement) {
video.requestPictureInPicture()
.catch(error => {
// Video failed to enter Picture-in-Picture mode.
});
} else {
document.exitPictureInPicture()
.catch(error => {
// Video failed to leave Picture-in-Picture mode.
});
}
});
</script>
משוב
אז מה דעתך? אתם יכולים לשלוח את המשוב שלכם ולהעלות בעיות במאגר WICG מסוג 'תמונה בתוך תמונה'. נשמח לשמוע מה דעתכם!
מניעת התנהגות ברירת המחדל של תמונה בתוך תמונה (PIP) ב-Android
כיום, אתם יכולים למנוע מהסרטונים ב-Chrome את השימוש בהתנהגות 'תמונה בתוך תמונה' (PIP) המוגדרת כברירת מחדל ב-Chrome. אתם יכולים להגיב לאירוע שמשנה את הגודל של הסרטון ולזהות אם גודל החלון השתנה באופן משמעותי (ראו את הקוד בהמשך). לא מומלץ להשתמש באפשרות הזו כפתרון קבוע, אבל היא מציעה אפשרות זמנית עד להטמעת ה-Web API.
// See whether resize is small enough to be PiP. It's a hack, but it'll
// work for now.
window.addEventListener('resize', function() {
if (!document.fullscreenElement) {
return;
}
var minimumScreenSize = 0.33;
var screenArea = screen.width * screen.height;
var windowArea = window.outerHeight * window.outerWidth;
// If the size of the window relative to the screen is less than a third,
// let's assume we're in PiP and exit fullscreen to prevent Auto PiP.
if ((windowArea / screenArea) < minimumScreenSize) {
document.exitFullscreen();
}
});