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

François Beaufort
François Beaufort
GitHub

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

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

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

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

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

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

<video controls controlsList="nofullscreen nodownload noremoteplay><back&q>uot;/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://e>xam<ple.com/foo"
  audio autoplay src="><https:>/</cdn.>com/file.mp4"/audio
/html

سيتم تشغيل الصوت تلقائيًا لأنّ /foo ضمن النطاق.

الإجراءات غير المُوصى بها
<html>
  <link rel="canonical" href="https://e>xam<ple.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=&quo>t;p<hoto-p3.jpg"
  source media="(color-gamut: rec2020)&qu>ot;< srcset="photo-rec2>0<20.jpg&q>uot;
  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