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

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

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

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

کنترل‌های رسانه‌ای بومی در کروم ۵۸
شکل ۱. کنترل‌های رسانه‌ای بومی در کروم ۵۸

این 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

قصد ارسال | ردیاب وضعیت کروم | اشکال کرومیوم

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

پیش از این، کروم بدون استثنا تمام 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>

قصد ارسال | ردیاب وضعیت کروم | اشکال کرومیوم

مکث پخش خودکار ویدیوی بی‌صدا هنگام نامرئی شدن

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

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

قصد ارسال | ردیاب وضعیت کروم | اشکال کرومیوم

پرس و جوی رسانه‌ای با طیف رنگ

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

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

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

کاربرد در 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")';
}

قصد ارسال | ردیاب وضعیت کروم | اشکال کرومیوم