تحديثات الوسائط في Chrome 58

François Beaufort
François Beaufort
GitHub

تخصيص عناصر التحكّم في الوسائط

يمكن للمطوّرين الآن تخصيص عناصر التحكّم في الوسائط الأصلية في Chrome، مثل أزرار التنزيل وملء الشاشة والتشغيل عن بُعد باستخدام واجهة ControlsList API الجديدة.

عناصر التحكّم في الوسائط الأصلية في الإصدار 58 من Chrome
عناصر التحكّم في الوسائط الأصلية في الإصدار 58 من Chrome

توفّر واجهة برمجة التطبيقات هذه طريقة لعرض عناصر التحكّم في الوسائط الأصلية أو إخفائها إذا كانت لا تبدو منطقية أو ليست جزءًا من تجربة المستخدم المتوقّعة، أو إذا كانت تتيح فقط مجموعة محدودة من الميزات.

والتنفيذ الحالي في الوقت الحالي هو آلية القائمة المحظورة على عناصر التحكّم المدمجة مع المحتوى، مع إمكانية ضبطها مباشرةً من محتوى HTML باستخدام السمة الجديدة controlsList. يمكنك الاطّلاع على العيّنة الرسمية.

الاستخدام في HTML:

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

الاستخدام في JavaScript:

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 | خطأ Chromium

إضافة ميزة "التشغيل التلقائي" لتطبيقات الويب التقدّمية إلى الشاشة الرئيسية

في السابق، كان Chrome يحظر جميع autoplay التي تتضمّن صوتًا على أجهزة Android بدون استثناء. لم يعُد هذا صحيحًا. من الآن فصاعدًا، سيُسمح للمواقع الإلكترونية التي تم تثبيتها باستخدام عملية الإضافة إلى الشاشة الرئيسية بالتشغيل التلقائي للصوت والفيديو المعروضة من المصادر المضمّنة في نطاق بيان تطبيق الويب بدون قيود.

{
  "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" ليس ضمن النطاق.

Intent to Ship | Chromestatus Tracker | Chromium Bug

إيقاف الفيديو المشغّل تلقائيًا والمكتوم مؤقتًا عندما يكون غير مرئي

يسمح متصفّح Chrome على أجهزة Android ببدء تشغيل فيديوهات muted بدون تفاعل من المستخدم. إذا تم وضع علامة muted على فيديو وكان يتضمّن سمة autoplay، يبدأ Chrome تشغيل الفيديو عندما يصبح مرئيًا للمستخدم.

اعتبارًا من الإصدار 58 من Chrome، سيتم إيقاف تشغيل الفيديوهات التي تحتوي على سمة autoplay مؤقتًا عندما لا تكون على الشاشة، وستتم استعادتها عند عودتها إلى الشاشة، وذلك وفقًا لسلوك Safari على نظام التشغيل iOS.

Intent to Ship | Chromestatus Tracker | Chromium Bug

استعلام عن وسائط color-gamut

بما أنّ الشاشات المتدرجة الألوان الواسعة تلقى رواجًا أكثر، يمكن للمواقع الإلكترونية الآن الوصول إلى مجموعة الألوان التقريبية التي يتيحها Chrome وأجهزة الإخراج باستخدام طلب بحث الوسائط color-gamut.

إذا لم تكن على دراية بعد بتعريفات مساحة اللون وملفّ تعريف اللون والنطاق ونطاق الألوان الواسع وعمق اللون، ننصحك بشدة بقراءة مقالة مدوّنة WebKit بعنوان تحسين الألوان على الويب. تتناول هذه المقالة الكثير من التفاصيل حول كيفية استخدام الاستعلام عن الوسائط color-gamut لعرض صور ذات نطاق واسع عندما يكون المستخدم على شاشات ذات مجموعة واسعة، ويعود إلى استخدام صور sRGB بخلاف ذلك.

يقبل الإصدار الحالي من Chrome الكلمات الرئيسية srgb وp3 (نطاق الألوان المحدَّد بمساحة ألوان DCI P3) وrec2020 (نطاق الألوان المحدَّد بمساحة ألوان ITU-R Recommendation BT.2020). يمكنك الاطّلاع على النموذج الرسمي.

الاستخدام في 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");
  }
}

الاستخدام في JavaScript:

// 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")';
}

Intent to Ship | Chromestatus Tracker | Chromium Bug