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

François Beaufort
François Beaufort
GitHub

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

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

عناصر التحكّم في الوسائط الأصلية في Chrome 58
عناصر التحكّم في الوسائط الأصلية في 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

هدف الشحن | أداة تتبّع حالة Chrome | خطأ 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 ليس في النطاق.

هدف الشحن | أداة تتبّع حالة Chrome | خطأ Chromium

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

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

بدءًا من إصدار 58 من Chrome، بهدف تقليل استخدام الطاقة، سيتم مؤقتًا إيقاف تشغيل الفيديوهات التي تتضمّن السمة autoplay عندما تكون خارج الشاشة وسيتم استئناف تشغيل الفيديوهات عند عرضها مجددًا بسبب سلوك متصفّح Safari لنظام التشغيل iOS".

هدف الشحن | أداة تتبّع حالة Chrome | خطأ Chromium

طلب بحث عن وسائط color-gamut

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

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

ويقبل التنفيذ الحالي في Chrome الكلمات الرئيسية srgb وp3 (سلسلة الألوان المحدّدة في DCI P3 Color Space) وrec2020 (سلسلة اللون المحدّدة من خلال اقتراح ITU-R 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");
  }
}

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

هدف الشحن | أداة تتبّع حالة Chrome | خطأ Chromium