עדכוני אודיו/וידאו ב-Chrome 58

François Beaufort
François Beaufort
GitHub

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

מפתחים יכולים עכשיו להתאים אישית את אמצעי הבקרה המובנים של Chrome על מדיה, כמו הלחצנים [remoteplayback],‏ [fullscreen] ו-download, באמצעות [ControlsList API] החדש.

בקרות מדיה מקוריות ב-Chrome 58
איור 1. 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>

<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 מתחיל להפעיל את הסרטון כשהוא הופך לגלוי למשתמש.

החל מ-Chrome 58, כדי לצמצם את צריכת החשמל, ההפעלה של סרטונים עם המאפיין 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‏ 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")';
}

Intent to Ship | Chromestatus Tracker | Chromium Bug