نافذة ضمن النافذة (PiP)

François Beaufort

منذ نيسان (أبريل) 2017، يتيح متصفّح Chrome على Android O ميزة "صورة في صورة". تسمح هذه الميزة للمستخدمين بتشغيل محتوى <video> في نافذة صغيرة لا تحجبها نوافذ أخرى، ما يتيح لهم المشاهدة أثناء تنفيذ أمور أخرى.

في ما يلي كيفية استخدام هذه الميزة: افتح Chrome وانتقِل إلى موقع إلكتروني يتضمّن فيديو وشغِّله في وضع ملء الشاشة. من هناك، اضغط على زر الشاشة الرئيسية للانتقال إلى الشاشة الرئيسية في Android، وسيتم تلقائيًا تحويل الفيديو الذي يتم تشغيله إلى وضع "صورة في صورة". هذا كلّ شيء. رائع، أليس كذلك؟

ولكن، ماذا عن سطح المكتب؟ ماذا لو أراد الموقع الإلكتروني التحكّم في هذه التجربة؟

والخبر السار هو أنّه يتم حاليًا صياغة مواصفات Picture-in-Picture Web 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 للصورة في الصورة. نحن حريصون على سماع أفكارك!

منع السلوك التلقائي لميزة "صورة في صورة" في 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();
    }
});