به روز رسانی رسانه در کروم 58

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

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

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

کنترل‌های رسانه بومی در Chrome 58
کنترل‌های رسانه بومی در 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>

صدا بصورت خودکار پخش می شود که /foo در محدوده است.

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

صدا پخش خودکار نمی شود زیرا /bar در محدوده نیست.

قصد حمل | ردیاب 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 | اشکال کروم