דף זה תורגם על ידי Cloud Translation API.

'תמונה בתוך תמונה' (PiP)

François Beaufort

מאז אפריל 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 ב'תמונה בתוך תמונה' 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();
    }
});