עדכוני מדיה ב-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

Intent to Ship | Chromestatus Tracker | באג ב-Chromium

ההפעלה האוטומטית לאפליקציות מסוג Progressive Web נוספו למסך הבית

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

Intent to Ship | Chromestatus Tracker | באג ב-Chromium

השהיה של סרטון מושתק שמופעלת אוטומטית כשהחשבון לא גלוי

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

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

Intent to Ship | Chromestatus Tracker | באג ב-Chromium

שאילתת מדיה של color-gamut

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

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

ההטמעה הנוכחית ב-Chrome מקבלת את מילות המפתח srgb,‏ p3 (סולם צבעים שצוין על ידי מרחב הצבעים DCI P3) ו-rec2020 (סולם צבעים שצוין על ידי מרחב הצבעים BT.2020 של המלצת ITU-R). כדאי לעיין בדוגמה הרשמית.

שימוש ב-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 לשלוח | מעקב אחר Chromestatus | באג ב-Chromium