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