قبل واجهة برمجة التطبيقات لميزة "نافذة ضمن النافذة"، كان من الممكن فقط وضع عنصر HTML <video> في نافذة نافذة ضمن النافذة. تتيح واجهة برمجة التطبيقات الجديدة هذه فتح نافذة تظهر دائمًا في الأعلى يمكن تعبئتها بمحتوى HTML عشوائي. وهي متاحة كنسخة تجريبية من المصدر تبدأ في الإصدار 111 من Chrome على أجهزة الكمبيوتر المكتبي.
توفر واجهة برمجة التطبيقات الجديدة ما هو أكثر بكثير من واجهة برمجة التطبيقات نافذة ضمن النافذة لـ <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 وتقديم الاقتراحات والأسئلة.
صورة رئيسية من تصوير جاكوب أوينز