قبل از Document Picture-in-Picture API ، فقط امکان قرار دادن یک عنصر HTML <video> در پنجره Picture-in-Picture وجود داشت. این API جدید باز کردن یک پنجره همیشه در بالا را امکان پذیر می کند که می تواند با محتوای HTML دلخواه پر شود. این به عنوان نسخه آزمایشی اصلی در Chrome 111 در دسک‌تاپ در دسترس است.
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 ارسال کنید .
تصویر قهرمان توسط جاکوب اونز .