منتشر شده: ۱۸ مارس ۲۰۲۶
با شروع از کروم ۱۴۲، برنامههای وب که صدا یا تصویر پخش میکنند، میتوانند در صورت ثبت یک کنترلکنندهی اکشن جلسهی رسانه، به طور خودکار وارد حالت تصویر در تصویر شوند . این یک ویژگی عالی برای پخشکنندههای موسیقی و ویدیو بوده است، اما مستلزم آن است که توسعهدهندگان به صراحت پشتیبانی را پیادهسازی کنند.
برای ارائه یک تجربه چندوظیفگی رسانهای روان و بهبود قابلیت کشف تصویر در تصویر (PiP)، کروم قابلیت Auto PiP را که توسط مرورگر آغاز میشود، معرفی میکند. این ویژگی به کروم اجازه میدهد تا بهطور خودکار یک پنجره PiP ویدیویی را برای سایتهایی که کنترلکننده اقدام جلسه رسانهای را ثبت نکردهاند، باز کند. این تضمین میکند که محتوای رسانه شما هنگام تغییر زبانهها قابل مشاهده باقی میماند.
دستورالعملها
- از کروم ۱۴۲ یا نسخههای جدیدتر آن در دسکتاپ استفاده کنید.
- گزینه «تصویر در تصویر به صورت خودکار توسط مرورگر فعال میشود» را در
chrome://flags/#browser-initiated-automatic-picture-in-pictureو کروم را مجدداً راهاندازی کنید. - به یک وبسایت ویدیویی بروید و یک ویدیو ( مثال ) پخش کنید.
- برای فعال کردن پنجره PiP ویدیو، به یک برگه Chrome دیگر بروید.
چگونه کار میکند؟
وقتی رسانهای را پخش میکنید و به تب دیگری میروید، کروم میتواند بهطور خودکار رسانه را به یک پنجره PiP ویدیویی که همیشه در بالا قرار دارد منتقل کند. برخلاف ویژگی موجود «Auto PiP برای پخش رسانه» که از ویدیو یا محتوای HTML دلخواه (با استفاده از API تصویر در تصویر سند ) پشتیبانی میکند، درخواستهای آغاز شده توسط مرورگر همیشه یک پنجره PiP ویدیویی استاندارد را باز میکنند.
برای اطمینان از یک تجربه کاربری با کیفیت بالا و بدون مزاحمت، کروم این رفتار را تنها زمانی فعال میکند که مجموعهای از شرایط سختگیرانه برآورده شده باشد:
- طبق سرویس مرور ایمن، آدرس اینترنتی فریم بالا ایمن است.
- رسانهها در قاب بالا قرار دارند.
- رسانهها ظرف دو ثانیه گذشته صدایشان شنیده شده است.
- رسانهها فوکوس صوتی دارند و در حال پخش هستند.
- یک پخشکنندهی «عادی» وجود دارد، یعنی یک عنصر رسانهای بیصدا که پخش شده و از
MediaStreamاستفاده نمیکند. - عنصر رسانهای باید دارای یک قطعه ویدیویی باشد.
- سایت به طور فعال از دوربین یا میکروفون استفاده نمیکند.
- آستانه شاخص تعامل رسانهای کاربر از حد مجاز فراتر رفته است، که نشان دهنده استفاده مکرر از سایت است. این شرایط در صورتی اعمال میشود که کاربر صراحتاً این ویژگی را مجاز یا رد نکرده باشد.
- در حال حاضر هیچ پنجره PiP باز نیست. اگر پنجره PiP دیگری از قبل باز باشد، کروم انتقال خودکار را آغاز نمیکند.
enterpictureinpicture ) و Auto PiP برای پخش رسانه (که در آن سایت کنترلکننده را ثبت کرده است).کنترل کاربر و حریم خصوصی
قابلیت تصویر در تصویر خودکار (Auto PiP) که توسط مرورگر فعال میشود، همان مجوزها و تنظیمات کاربر را مانند درخواستهای سایت فعال میکند. اولین باری که یک سایت به طور خودکار وارد PiP میشود، کروم یک پنجرهی محاورهای برای اجازه دادن به کاربران نمایش میدهد که از آنها میپرسد آیا میخواهند این رفتار را در آینده برای سایت فعال کنند یا خیر.
کاربران همچنین میتوانند این مجوزها را در هر زمان از طریق « تنظیمات سایت » مدیریت کنند.
کنترل و انصراف توسعهدهنده
اگرچه این ویژگی برای اکثر سایتهای ویدیویی به صورت پیشفرض طراحی شده است، اما میتوانید از این رفتار انصراف دهید.
هندلر خودتان را پیادهسازی کنید
اگر برنامه وب شما از قبل یک کنترلکننده اکشن جلسه رسانه برای اکشن enterpictureinpicture ثبت کرده باشد، پیادهسازی شما اولویت دارد و کروم انتقال خودکار خود را آغاز نمیکند.
اگر میخواهید رفتار کروم را در زمانی که تشخیص میدهد انتقال مناسب است، سفارشی کنید، تابع enterpictureinpicture action handler reason در MediaSessionActionDetails قرار میدهد. میتوانید بررسی کنید که آیا reason contentoccluded است یا خیر (یعنی مرورگر درخواست را به دلیل پنهان بودن تب آغاز کرده است) و تصمیم بگیرید که چگونه ادامه دهید.
navigator.mediaSession.setActionHandler("enterpictureinpicture", (details) => {
if (details.reason === "contentoccluded") {
// The browser suggests entering Picture-in-Picture.
// You can choose to open a standard video PiP or a Document PiP window, or do
// nothing (effectively blocking browser-initiated Auto Picture-in-Picture).
}
});
بهترین شیوهها برای جلسه رسانهای
با قابلیت Auto PiP که توسط مرورگر آغاز میشود، پیکربندی جلسه رسانه شما به کروم کمک میکند تا محتوای شما را درک کرده و با آن تعامل داشته باشد. یک MediaSession که به خوبی پیکربندی شده باشد، تضمین میکند که پنجره PiP یک تجربه با کیفیت بالا با کنترلها و اطلاعات دقیق برای کاربران فراهم میکند.
نوار پیشرفت را همگام نگه دارید
اگر از API setPositionState استفاده شود و موقعیت جلسه رسانه به درستی بهروزرسانی نشود، پنجرههای PiP در طول پخش رسانه، نوار پیشرفت نادرستی را نمایش میدهند. برای جلوگیری از این امر، همیشه position state با استفاده از navigator.mediaSession.setPositionState() به طور مناسب بهروزرسانی یا غیرفعال کنید (برای مثال، وقتی منبع رسانه تغییر میکند یا بازنشانی میشود)، تا پنجره PiP موقعیت صحیح را برای رسانه در حال پخش منعکس کند.
const video = document.querySelector('video');
function updatePositionState() {
if ('setPositionState' in navigator.mediaSession) {
navigator.mediaSession.setPositionState({
duration: video.duration,
playbackRate: video.playbackRate,
position: video.currentTime,
});
}
}
// Update when metadata is loaded or when seeking happens.
video.addEventListener("loadedmetadata", updatePositionState);
video.addEventListener("seeked", updatePositionState);
انتقالها را با ظرافت انجام دهید
اگر سایت شما به طور خودکار "قسمت بعدی" را پخش میکند، مطمئن شوید که کنترلکنندههای اکشن MediaSession و فرادادههای شما در طول انتقال فعال و دقیق باقی میمانند. اگر کنترلکنندههای اکشن در طول انتقال به عنصر "بعدی" حذف یا غیرفعال شوند، پنجره PiP ممکن است قابلیتهایی را که توسط کنترلکننده ارائه شده بود، از دست بدهد.
فعال کردن کنترل کامل
فراتر از پخش و مکث ساده، پیادهسازی هندلرهایی برای seekto ، previoustrack و nexttrack را در نظر بگیرید. این به کاربران اجازه میدهد تا محتوای شما را مستقیماً از پنجره PiP و بدون بازگشت به تب اصلی، پیمایش کنند.
navigator.mediaSession.setActionHandler("seekto", (details) => {
if (details.fastSeek && "fastSeek" in video) {
video.fastSeek(details.seekTime);
return;
}
video.currentTime = details.seekTime;
});
مشارکت کنید و بازخورد خود را به اشتراک بگذارید
اگر در مورد این رفتار بازخوردی دارید یا با مشکلی مواجه شدهاید، آنها را در crbug.com به اشتراک بگذارید.