از آوریل ۲۰۱۷، Chrome برای Android O از تصویر در تصویر پشتیبانی می‌کند . این به کاربران اجازه می دهد تا یک عنصر <video> را در یک پنجره همپوشانی کوچک که توسط سایر پنجره ها مسدود نشده است، پخش کنند تا بتوانند در حین انجام کارهای دیگر تماشا کنند.
نحوه کار به این صورت است: Chrome را باز کنید، به وب‌سایتی که حاوی یک ویدیو است بروید و آن را تمام صفحه پخش کنید. از آنجا، دکمه Home را فشار دهید تا به صفحه اصلی Android خود بروید و ویدیوی در حال پخش به طور خودکار به تصویر در تصویر منتقل می شود. همین! خیلی باحاله درسته؟
این است، اما در مورد دسکتاپ چطور؟ اگر وب سایت بخواهد آن تجربه را کنترل کند چه؟
خبر خوب این است که در حال صحبت کردن، مشخصات Web API Picture-in-Picture در حال تهیه است. هدف این ویژگی این است که به وب‌سایت‌ها اجازه دهد این رفتار را با افشای مجموعه ویژگی‌های زیر در API آغاز و کنترل کنند:
- هنگامی که یک ویدیو وارد حالت تصویر در تصویر می شود و از آن خارج می شود، وب سایت را مطلع کنید.
- به وب‌سایت اجازه دهید تصویر در تصویر را در یک عنصر ویدیویی از طریق اشاره کاربر فعال کند.
- به وب سایت اجازه دهید از تصویر در تصویر خارج شود.
- به وب‌سایت اجازه دهید بررسی کند که «تصویر در تصویر» می‌تواند فعال شود یا خیر.
و به این صورت می تواند به نظر برسد:
<video id="video" src="https://example.com/file.mp4"></video>
<button id="pipButton"></button>
<script>
// Hide button if Picture-in-Picture is not supported.
pipButton.hidden = !document.pictureInPictureEnabled;
pipButton.addEventListener('click', function() {
// If there is no element in Picture-in-Picture yet, let's request Picture
// In Picture for the video, otherwise leave it.
if (!document.pictureInPictureElement) {
video.requestPictureInPicture()
.catch(error => {
// Video failed to enter Picture-in-Picture mode.
});
} else {
document.exitPictureInPicture()
.catch(error => {
// Video failed to leave Picture-in-Picture mode.
});
}
});
</script>
بازخورد
خب چی فکر می کنی؟ لطفاً بازخورد خود را ارسال کنید و مشکلات را در مخزن WICG Picture-in-Picture مطرح کنید. ما مشتاق شنیدن نظرات شما هستیم!
جلوگیری از رفتار پیش‌فرض PIP اندروید
امروزه، می‌توانید با پاسخ دادن به یک رویداد تغییر اندازه، و تشخیص زمانی که اندازه پنجره به طور قابل توجهی تغییر کرده است، از استفاده از رفتار پیش‌فرض PiP Android در کروم جلوگیری کنید (کد زیر را ببینید). این به عنوان یک راه حل دائمی توصیه نمی شود، اما یک گزینه موقت تا زمانی که Web API پیاده سازی شود ارائه می دهد.
// See whether resize is small enough to be PiP. It's a hack, but it'll
// work for now.
window.addEventListener('resize', function() {
if (!document.fullscreenElement) {
return;
}
var minimumScreenSize = 0.33;
var screenArea = screen.width * screen.height;
var windowArea = window.outerHeight * window.outerWidth;
// If the size of the window relative to the screen is less than a third,
// let's assume we're in PiP and exit fullscreen to prevent Auto PiP.
if ((windowArea / screenArea) < minimumScreenSize) {
document.exitFullscreen();
}
});