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

François Beaufort
François Beaufort
GitHub

התאמה אישית של כפתורי המדיה

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

אמצעי בקרה מקוריים למדיה ב-Chrome 58
Native media controls in 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 Bug

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

בעבר, 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 Bug

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

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

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

Intent to Ship | Chromestatus Tracker | Chromium Bug

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

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