في الإصدار 69 ، ظهر امتداد PictureInPicture ، والذي يسمح لك بعرض الفيديو أعلى جميع النوافذ. قررت اختبار هذه الميزة ومشاركة النتائج.
عثرت على سبيل المثال على الفور ، ولكن الزر صورة داخل صورة للتبديل إلى وضع صورة داخل صورة (فيما يلي PiP) لم يكن متاحًا ، وذهبت للتحقق من علامة
الكروم: // flags / # enable-picture-in-picture ، القيمة هي "افتراضي" ، لأن هذه العلامة هي بمثابة "ممكّنة" ، لكنها ما زالت تحاول تمكينها يدويًا.
لم يساعد ذلك ، اتضح أننا بحاجة إلى علم آخر من
الكروم: // flags / # enable-surfaces-for-videos ، والقيمة "Default" لأنها تعادل "Disabled".
قيد التشغيل وكسب. يكتبون أيضًا أنه من الضروري تمكين العلم # enable-التجريبية-web-platform-platform-features ، ولكنه عمل بدوني.
مثال
دعونا نجعل مثالاً بسيطًا ، علامة <video /> ، وهو زر لتشغيل / إيقاف وضع PiP ، ومعالجة أحداث PiP المتاحة.
<html> <head> <title>Chrome 69</title> </head> <body> <video width="320" height="240" controls> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video> <br/> <button> PiP</button> <script> const video = document.querySelector('video'); const button = document.querySelector('button'); if (!document.pictureInPictureEnabled) { button.textContent = ' PiP .'; button.disabled = true; } button.addEventListener('click', () => { if (document.pictureInPictureElement) { document.exitPictureInPicture() .then(() => { }) .catch(() => { }); } else { video.requestPictureInPicture() .then(() => { }) .catch(() => { }); } }); video.addEventListener('enterpictureinpicture', () => { button.textContent = ' PiP'; }); video.addEventListener('leavepictureinpicture', () => { button.textContent = ' PiP'; }); </script> </body> </html>
تحقق من توفر الوضع:
if (document.pictureInPictureEnabled){
الأمر بسيط ، إذا كانت الخاصية موجودة ، فإنها ترجع صواب أو خطأ.
نقوم بتقديم طلب لبدء الوضع:
button.addEventListener('click', () => { video.requestPictureInPicture() .then(() => { }) .catch(() => { }); });
إذا تم الحصول على إذن ، فقم بتنفيذ الصيد. سيتم رفض الطلب بالتأكيد إذا لم يتم تشغيله بواسطة حدث مستخدم.
بعد بدء document.pictureInPictureElement سيعود عنصر <video /> الخاص بنا.
للخروج من الوضع ، يمكنك النقر فوق التقاطع في الزاوية العلوية اليمنى في نافذة PiP.
يمكنك عمل ناتج برمجيًا:
button.addEventListener('click', () => { if (document.pictureInPictureElement) { document.exitPictureInPicture() .then(() => { }) .catch(() => { }); } });
بعد الخروج من document.pictureInPictureElement ، سيتم إرجاع قيمة فارغة مرة أخرى.
أحداث PiP
يتوفر حدثان ، وضع PiP وإيقافه ، على التوالي:
video.addEventListener('enterpictureinpicture', () => { // button.textContent = ' PiP'; }); video.addEventListener('leavepictureinpicture', () => { // button.textContent = ' PiP'; });
الملخص
في الوقت الحالي ، لا يعمل هذا الوضع إلا مع علامة <video /> ، ولكن يمكن توسيعه.
تظهر نافذة PiP في الزاوية اليمنى السفلية ، حتى الآن لا يمكننا التأثير عليها.
وضع PiP غير متوافق مع وضع ملء الشاشة ، أو واحد أو آخر ، وهو منطقي تمامًا.
يمكن أن يكون هناك نافذة PiP واحدة فقط في كل مرة.
تتم الإشارة إلى علامة التبويب التي قام المستخدم بتمكين وضع PiP من خلال الرمز (مرئي على KDPV).
UPD : API الجديد هو قسم W3C يسمى WICG (Web Community Incubator Community Group).
باستخدام واجهة برمجة التطبيقات هذه ، يمكن للمواقع التحكم في وقت فتح وإغلاق نافذة PiP ، وإنشاء زر خاص بها للإدارة وجمع الإحصائيات عندما يستخدم المستخدم PiP.
بعض المتصفحات تدعم هذه الميزة بالفعل ، ولكنها لا تعتمد على W3C
(على سبيل المثال ، Opera و Yandex.Browser).
لم يعلن Firefox و Edge بعد عن تنفيذ API الجديد.