هنگام پخش رسانه، تصویر در تصویر را به طور خودکار وارد کنید

فرانسوا بوفور
François Beaufort

تاریخ انتشار: 5 فوریه 2025

از Chrome 120، برنامه‌های وب کنفرانس ویدیویی می‌توانند به‌طور خودکار پنجره تصویر در تصویر را هنگامی که کاربر فوکوس را از برگه فعلی خود تغییر می‌دهد، باز کند. این برای ارائه دهندگانی مفید است که می خواهند هنگام ارائه یک سند یا استفاده از برگه ها یا پنجره های دیگر، شرکت کنندگان را در زمان واقعی ببینند و با آنها تعامل داشته باشند. برای جزئیات بیشتر به تصویر در تصویر خودکار برای برنامه های وب کنفرانس ویدیویی مراجعه کنید.

از Chrome 134، برنامه‌های وب که صدا یا ویدیو پخش می‌کنند می‌توانند به‌طور خودکار وارد حالت تصویر در تصویر شوند. این بدان معناست که پخش‌کننده‌های موسیقی و ویدیو در وب اکنون می‌توانند به‌طور یکپارچه به پنجره پخش‌کننده کوچک هنگامی که کاربر برگه‌ها را تغییر می‌دهد، جابه‌جا شود و نیازی به فعال‌سازی دستی را از بین ببرد.

هنگامی که کاربر Spotify برگه ها را تغییر می دهد، یک پنجره تصویر در تصویر به طور خودکار باز و بسته می شود.

برای پشتیبانی از این موارد استفاده از پخش رسانه، برنامه‌های وب دسک‌تاپ Chrome 134 می‌توانند به‌طور خودکار تصویر در تصویر را با چند محدودیت برای اطمینان از تجربه کاربری مثبت وارد کنند. یک برنامه وب فقط در صورتی واجد شرایط نمایش خودکار تصویر در تصویر برای پخش رسانه است که همه شرایط زیر را داشته باشد:

  • URL فریم بالایی طبق سرویس Safe Browsing ایمن است.

  • رسانه ها در قاب بالایی زندگی می کنند.

  • رسانه ها در دو ثانیه گذشته قابل شنیدن هستند.

  • رسانه تمرکز صوتی دارد.

  • رسانه ها بازی می کنند.

  • یک کنترل کننده عملکرد جلسه رسانه برای عملکرد "enterpictureinpicture" ثبت شده است.

  • از آستانه شاخص تعامل رسانه ای کاربر فراتر رفته است، که نشان می دهد کاربر به طور مکرر از رسانه در این برنامه وب استفاده می کند. این در صورتی اعمال می‌شود که تنظیمات مرورگر کاربر «می‌تواند درخواست ورود تصویر در تصویر» را داشته باشد. اگر کاربر به صراحت به برنامه وب اجازه دهد تصویر در تصویر را وارد کند، این شرط اعمال نمی شود.

تنظیم خودکار تصویر در تصویر در صفحه اطلاعات سایت مرورگر کروم.
تنظیم خودکار تصویر در تصویر در صفحه اطلاعات سایت مرورگر کروم.

اشکال 386193409 اجرای شرایط سطحی را دنبال می کند تا اشکال زدایی و پیاده سازی را آسان تر کند.

توجه داشته باشید که اگر پنجره تصویر در تصویر دیگری از قبل باز است، Chrome تصویر در تصویر خودکار را فعال نمی‌کند. اگر پنجره تصویر در تصویر موجود به طور خودکار باز شده باشد و در شرف بسته شدن باشد، این قانون اعمال نمی شود.

هنگامی که یک برنامه وب شرایط مورد نیاز را برآورده می کند، تغییر فوکوس به برگه دیگر، عملکرد بازخوانی کنترل کننده عملکرد جلسه رسانه را برای عملکرد "enterpictureinpicture" فعال می کند. این به برنامه وب اجازه می‌دهد پنجره تصویر در تصویر را بدون اشاره کاربر باز کند. سپس ممکن است یک گفتگوی مجوز به کاربر نمایش داده شود، که از او بپرسد آیا مایلند به سایت اجازه دهند هر بار، فقط این بار، یا هرگز به صورت خودکار تصویر در تصویر را وارد کند.

یک پوشش مجوز در پنجره تصویر در تصویر که از کاربر می پرسد که آیا مایل است به سایت اجازه دهد تصویر در تصویر را به طور خودکار وارد کند.
از کاربر سؤال می شود که آیا وارد کردن تصویر در تصویر به طور خودکار مجاز است یا خیر.

می‌توانید از API Picture-in-Picture برای <video> برای باز کردن یک پنجره تصویر در تصویر از عنصر <video> HTML یا از Document Picture-in-Picture API برای باز کردن یک پنجره همیشه در بالا برای پر کردن محتوای HTML دلخواه استفاده کنید. پنجره تصویر در تصویر هنگام باز شدن فوکوس نمی شود و وقتی صفحه دوباره قابل مشاهده شد به طور خودکار بسته می شود.

مثال زیر به شما نشان می دهد که چگونه یک عنصر <video> HTML را زمانی که کاربر روی دکمه کلیک می کند، پخش کنید. سپس، به‌طور ایمن یک کنترل‌کننده عملکرد جلسه رسانه را برای عملکرد "enterpictureinpicture" با یک تابع تماس که پنجره تصویر در تصویر را باز می‌کند، ثبت کنید. این پنجره حاوی ویدیو با API Picture-in-Picture برای <video> است.

const video = document.querySelector("video");

async function onPlayButtonClick() {
  // Play video.
  await video.play();
}

try {
  // Request video to automatically enter picture-in-picture when eligible.
  navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
    await video.requestPictureInPicture();
  });
} catch (error) {
  console.log("The enterpictureinpicture action is not yet supported.");
}

نسخه ی نمایشی پخش کننده VideoJS را امتحان کنید که API تصویر در تصویر سند را به نمایش می گذارد یا با نمونه های جلسه رسانه ویدیویی و جلسه رسانه صوتی بازی کنید.

مشارکت کنید و بازخورد را به اشتراک بگذارید

اگر بازخورد دارید یا با مشکلی مواجه شدید، می‌توانید آنها را در crbug.com به اشتراک بگذارید.

منابع

قدردانی ها

با تشکر از بنجامین کین و فرانک لیبراتو برای نقدهایشان.