עדכוני מדיה ב-Chrome 58

François Beaufort
François Beaufort
GitHub

התאמה אישית של פקדי המדיה

המפתחים יכולים עכשיו להתאים אישית את אמצעי הבקרה של המדיה המקורית ב-Chrome, כמו הלחצנים 'הורדה', 'מסך מלא' והפעלה מרחוק באמצעות ControlsList API החדש.

פקדי מדיה מקורית ב-Chrome 58
פקדי מדיה מותאמת ב-Chrome 58

בעזרת ה-API הזה אפשר להציג או להסתיר בקרי מדיה נייטיב לא הגיוניים, לא הגיוניים או שהם לא חלק מחוויית המשתמש הצפויה, או שמאפשרים רק קבוצה מוגבלת של תכונות.

נכון לעכשיו, היישום הנוכחי הוא מנגנון של רשימת חסימה בבקרות נייטיב, עם היכולת להגדיר אותן ישירות מתוכן 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 | באג ב-Chromium

ההפעלה האוטומטית של Progressive Web Apps נוספה למסך הבית

בעבר, 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 לא כלול בהיקף.

כוונה לשלוח | מעקב Chromestatus | באג ב-Chromium

השהיית ההפעלה האוטומטית של סרטונים מושתקים במצב מוסתר

כפי שאולי כבר ידוע לך, Chrome ב-Android מאפשר להפעלת סרטונים של muted ללא אינטראקציה של המשתמש. אם סרטון מסומן כ-muted ויש לו את המאפיין autoplay, Chrome יתחיל להפעיל את הסרטון כשהוא גלוי למשתמש.

כדי להפחית את צריכת החשמל, החל מ-Chrome 58, הפעלת סרטונים עם המאפיין autoplay תושהה כשהיא מחוץ למסך ותמשיך כשנמצאים בתצוגה, בהתאם להתנהגות של Safari ב-iOS.

כוונה לשלוח | מעקב Chromestatus | באג ב-Chromium

שאילתת מדיה של לוח צבעים

מאחר שמסכים של סולם צבעים רחב הם פופולריים יותר ויותר, אתרים יכולים עכשיו לגשת לטווח המשוער של צבעים שנתמך ב-Chrome ובמכשירי פלט באמצעות שאילתת המדיה color-gamut.

אם אתם עדיין לא מכירים את ההגדרות של מרחב צבעים, פרופיל צבעים, סולם, מכלול רחב ועומק צבעים, מומלץ מאוד לקרוא את הפוסט בבלוג שיפור צבע באינטרנט ב-WebKit. נסביר בפירוט איך להשתמש בשאילתת המדיה color-gamut כדי להציג תמונות עם טווח רחב כשהמשתמשים משתמשים בצגי סולם רחב, ואם לא, הם חוזרים להשתמש בתמונות עם פורמט sRGB.

ההטמעה הנוכחית ב-Chrome מקבלת את מילות המפתח srgb, p3 (לוח הצבעים שצוין על ידי מרחב הצבעים DCI P3) ו-rec2020 (הסולם שצוין על ידי ITU-R Recommendation 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 | באג ב-Chromium