منذ نيسان (أبريل) 2017، أصبح Chrome لنظام التشغيل Android O متوافقًا مع ميزة "نافذة ضمن النافذة".
ويتيح هذا النوع من الإعلانات للمستخدمين تشغيل عنصر <video> في نافذة صغيرة تظهر على سطح الفيديو ولا تحجبها نوافذ أخرى، ما يتيح لهم مشاهدته أثناء تنفيذ مهام أخرى.
إليك طريقة عمله: افتح Chrome وانتقِل إلى موقع إلكتروني يحتوي على فيديو وشغِّل الفيديو بملء الشاشة. ومن هناك، اضغط على زر الشاشة الرئيسية للانتقال إلى "الشاشة الرئيسية" في جهاز Android سينتقل الفيديو الذي يتم تشغيله تلقائيًا إلى نافذة ضمن النافذة. هَذِهِ هِيَ كُلُّ الْأَحْدَاثِ الَّتِي وَجَدْتُهَا. يبدو رائعًا جدًا، أليس كذلك؟
لكن ماذا عن سطح المكتب؟ ماذا لو أراد موقع الويب التحكم في هذه التجربة؟
الخبر السار هو أنّه تتم حاليًا صياغة مواصفات واجهة برمجة تطبيقات الويب نافذة ضمن النافذة أثناء تحدّثنا. تهدف هذه المواصفات إلى السماح للمواقع الإلكترونية ببدء هذا السلوك والتحكّم فيه من خلال إظهار مجموعة السمات التالية لواجهة برمجة التطبيقات:
- إرسال إشعار إلى الموقع الإلكتروني عند دخول فيديو في وضع "نافذة ضمن النافذة" أو مغادرته
- السماح للموقع الإلكتروني بتشغيل ميزة "نافذة ضمن النافذة" على عنصر فيديو من خلال إيماءة المستخدم
- السماح للموقع الإلكتروني بالخروج من وضع "نافذة ضمن النافذة".
- اسمح للموقع الإلكتروني بالتحقق من إمكانية تشغيل نافذة ضمن النافذة.
إليك الشكل الذي يمكن أن يبدو عليه الأمر:
<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();
}
});