تحديثات الصوت/الفيديو في Chrome 58

François Beaufort
François Beaufort
GitHub

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

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

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

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>

<html>
  <link rel="canonical" href="https://example.com/bar">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

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