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

François Beaufort
François Beaufort
GitHub

התאמה אישית של לחצני המדיה

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

אמצעי בקרה מקומיים על מדיה ב-Chrome 58
איור 1. אמצעי בקרה מקומיים על מדיה ב-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 | מעקב אחר סטטוס Chrome | באג ב-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>

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

כוונה להשקה | מעקב אחר סטטוס Chrome | באג ב-Chromium

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

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

החל מגרסה 58 של Chrome, כדי לצמצם את צריכת החשמל, ההפעלה של סרטונים עם המאפיין 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 to Ship | Chromestatus Tracker | באג ב-Chromium