מאפריל 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
היום אפשר למנוע מהווידאו להשתמש בהתנהגות ברירת המחדל של Android ב-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();
}
});