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

فرانسوا بوفورت
فرانسوا بوفورت
GitHub

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

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

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

نية الشحن | Chromestatus Tracker | خطأ في 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>

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

نية الشحن | Chromestatus Tracker | خطأ في Chromium

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

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

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

نية الشحن | Chromestatus Tracker | خطأ في Chromium

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

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

إذا لم تكن معتادًا على تعريفات مساحة اللون وملف تعريف الألوان والنطاق العريض والنطاق العريض وعمق الألوان، أنصحك بقراءة مشاركة مدونة تحسين الألوان على الويب لمجموعة أدوات الويب WebKit. يعمّق المستخدمون في التفاصيل حول كيفية استخدام الاستعلام عن الوسائط 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")';
}

نية الشحن | Chromestatus Tracker | خطأ في Chromium