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