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

פרנסואה בופורט
פרנסואה בופורט
GitHub

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

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

פקדי מדיה מקוריים ב-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

כוונה לשלוח | מעקב אחר הסטטוס של Chrome | באג ב-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>

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

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

כוונה לשלוח | מעקב אחר הסטטוס של Chrome | באג ב-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")';
}

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