تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
François Beaufort
قبل استخدام Document Picture-in-Picture API، لم يكن بإمكانك سوى وضع عنصر HTML <video> في نافذة "نافذة ضمن النافذة". تتيح واجهة برمجة التطبيقات الجديدة هذه فتح نافذة منبثقة بشكل دائم يمكن تعبئتها بمحتوى HTML عشوائي. وهي متاحة كإصدار تجريبي المصدر بدءًا من Chrome 111 على أجهزة الكمبيوتر المكتبي.
توفّر واجهة برمجة التطبيقات الجديدة ميزات أكثر بكثير من واجهة برمجة التطبيقات Picture-in-Picture API في <video>. على سبيل المثال، يمكنك توفير عناصر تحكّم ومدخلات مخصّصة (مثل الشرح وقوائم التشغيل وشريط تمرير الوقت والفيديوهات التي أعجبتك وعدم الإعجاب بها) لتحسين تجربة المستخدم في مشغّل الفيديو "نافذة ضمن النافذة".
باستخدام وضع "المستند" الكامل في ميزة "نافذة ضمن النافذة"، يمكن لتطبيقات الويب لاجتماعات الفيديو دمج عدة مجموعات بث فيديو في نافذة واحدة ضمن ميزة "نافذة ضمن النافذة" بدون الحاجة إلى الاعتماد على نصائح لاستخدام لوحات الرسم. ويمكنهم أيضًا توفير عناصر تحكُّم مخصّصة مثل إرسال رسالة أو كتم صوت مستخدم آخر أو رفع اليد.
يوضّح لك مقتطف الرمز التالي كيفية التبديل بين وضع "نافذة ضمن النافذة" لمشغّل فيديو مخصّص.
asyncfunctiontogglePictureInPicture(){// Close Picture-in-Picture window if any.if(documentPictureInPicture.window){documentPictureInPicture.window.close();return;}// Open a Picture-in-Picture window.constpipWindow=awaitdocumentPictureInPicture.requestWindow({initialAspectRatio:640/360,copyStyleSheets:true,});// Move video to the Picture-in-Picture window.constvideo=document.querySelector("#video");pipWindow.document.body.append(video);// Listen for the PiP closing event to move the video back.pipWindow.addEventListener("unload",(event)=>{constvideoContainer=document.querySelector("#videoContainer");constpipVideo=event.target.querySelector("#video");videoContainer.append(pipVideo);});}