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

François Beaufort
François Beaufort
GitHub

تخصيص أدوات التحكّم في الوسائط

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

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

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

تتضمّن عملية التنفيذ الحالية آلية قائمة حظر في عناصر التحكّم الأصلية مع إمكانية ضبطها مباشرةً من محتوى 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

Intent to Ship | Chromestatus Tracker | Chromium Bug

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

في السابق، كان 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