به‌روزرسانی‌های صوتی/تصویری در Chrome 58

فرانسوا بوفور
فرانسوا بوفور
GitHub

رسانه سفارشی سازی را کنترل می کند

توسعه‌دهندگان اکنون می‌توانند کنترل‌های رسانه بومی Chrome مانند دکمه‌های دانلود، تمام صفحه و [پخش از راه دور] را با استفاده از [ControlsList API] جدید سفارشی کنند.

کنترل‌های رسانه بومی در Chrome 58
شکل 1. کنترل‌های رسانه بومی در Chrome 58

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

پیاده سازی فعلی در حال حاضر مکانیسم لیست بلاک بر روی کنترل های بومی با قابلیت تنظیم مستقیم آنها از محتوای HTML با استفاده از ویژگی جدید controlsList است. نمونه رسمی را بررسی کنید.

استفاده در HTML:

<video controls controlsList="nofullscreen nodownload noremoteplayback"></video>

استفاده در جاوا اسکریپت:

var video = document.querySelector('video');
video.controls; // true
video.controlsList; // ["nofullscreen", "nodownload", "noremoteplayback"]
video.controlsList.remove('noremoteplayback');
video.controlsList; // ["nofullscreen", "nodownload"]
video.getAttribute('controlsList'); // "nofullscreen nodownload"

video.controlsList.supports('foo'); // false
video.controlsList.supports('noremoteplayback'); // true

قصد حمل | ردیاب Chromestatus | اشکال کروم

پخش خودکار برای برنامه های وب پیشرفته به صفحه اصلی اضافه شده است

قبلاً کروم از autoplay با صدا در اندروید بدون استثنا استفاده می کرد. این دیگر حقیقت ندارد. از این پس، سایت‌هایی که با استفاده از جریان بهبودیافته «افزودن به صفحه اصلی» نصب می‌شوند، اجازه دارند بدون محدودیت، صدا و ویدیوی ارائه‌شده از مبداهای موجود در محدوده مانیفست برنامه وب را به‌طور خودکار پخش کنند.

{
  "name": "My Web App",
  "description": "An awesome app",
  "scope": "/foo",
  ...
}

<html>
  <link rel="canonical" href="https://example.com/foo">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

<html>
  <link rel="canonical" href="https://example.com/bar">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

قصد حمل | ردیاب Chromestatus | اشکال کروم

در صورت نامرئی، پخش خودکار ویدیوی خاموش را متوقف کنید

همانطور که قبلاً می دانید، Chrome در Android به ویدیوهای muted اجازه می دهد بدون تعامل کاربر شروع به پخش کنند. اگر ویدیویی به‌عنوان muted علامت‌گذاری شده باشد و دارای ویژگی autoplay باشد، زمانی که ویدیو برای کاربر قابل مشاهده باشد، Chrome شروع به پخش آن می‌کند.

از Chrome 58، به‌منظور کاهش مصرف انرژی، پخش ویدیوهای دارای ویژگی autoplay در حالت خارج از صفحه متوقف می‌شود و به دنبال رفتار Safari iOS، پس از مشاهده مجدد ازسرگیری می‌شود.

قصد حمل | ردیاب Chromestatus | اشکال کروم

پرسش رسانه ای طیف رنگ

از آنجایی که صفحه‌نمایش‌های طیف رنگی گسترده‌تر و محبوب‌تر می‌شوند، سایت‌ها اکنون می‌توانند با استفاده از جستجوی رسانه color-gamut به طیف تقریبی رنگ‌های پشتیبانی شده توسط Chrome و دستگاه‌های خروجی دسترسی داشته باشند.

اگر هنوز با تعاریف فضای رنگ، نمایه رنگ، وسعت، گستره وسیع و عمق رنگ آشنا نیستید، اکیداً توصیه می کنم پست وبلاگ بهبود رنگ در وب کیت وب را مطالعه کنید. در مورد نحوه استفاده از پرس و جو رسانه ای color-gamut برای ارائه تصاویر با گستره وسیع زمانی که کاربر روی نمایشگرهای وسعت گسترده است و در غیر این صورت به تصاویر sRGB بازگشتی به جزئیات بیشتر می شود.

پیاده‌سازی کنونی در Chrome کلیدواژه‌های srgb ، p3 (گستره مشخص شده توسط فضای رنگی DCI P3) و rec2020 (محدوده مشخص شده توسط ITU-R Recommendation BT.2020 Color Space) را می‌پذیرد. نمونه رسمی را بررسی کنید.

استفاده در HTML:

<picture>
  <source media="(color-gamut: p3)" srcset="photo-p3.jpg">
  <source media="(color-gamut: rec2020)" srcset="photo-rec2020.jpg">
  <img src="photo-srgb.jpg">
</picture>

استفاده در CSS:

main {
  background-image: url("photo-srgb.jpg");
}

@media (color-gamut: p3) {
  main {
    background-image: url("photo-p3.jpg");
  }
}

@media (color-gamut: rec2020) {
  main {
    background-image: url("photo-rec2020.jpg");
  }
}

استفاده در جاوا اسکریپت:

// It is expected that the majority of color displays will return true.
if (window.matchMedia("(color-gamut: srgb)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-srgb.jpg")';
}

if (window.matchMedia("(color-gamut: p3)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-p3.jpg")';
}

if (window.matchMedia("(color-gamut: rec2020)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-rec2020.jpg")';
}

قصد حمل | ردیاب Chromestatus | اشکال کروم