- מפתחים יכולים עכשיו להתאים אישית את פקדי המדיה, כמו לחצן ההורדה, מסך מלא ולחצן ההפעלה מרחוק.
- אתרים שהותקנו באמצעות התהליך 'הוספה למסך הבית' יכולים להפעיל אוטומטית אודיו ווידאו בהיקף של המניפסט.
- Chrome ב-Android משהה עכשיו את ההפעלה האוטומטית של סרטון מושתק כשהוא בלתי נראה.
- באמצעות
color-gamut
Media Query, המפתחים יכולים עכשיו לגשת לטווח המשוער של הצבעים שנתמכים ב-Chrome ובמכשירי פלט. - כשמשתמשים בתוספים של Media Source, עכשיו אפשר לעבור בין שידורים מוצפנים לבין שידורים ברורים.
התאמה אישית של פקדי המדיה
המפתחים יכולים עכשיו להתאים אישית את אמצעי הבקרה של המדיה המקורית ב-Chrome, כמו הלחצנים 'הורדה', 'מסך מלא' והפעלה מרחוק באמצעות ControlsList API החדש.
בעזרת ה-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
כוונה לשלוח | מעקב Chromestatus | באג ב-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>
האודיו יופעל אוטומטית כש-/foo
כלול בהיקף.
<html> <link rel="canonical" href="https://example.com/bar"> <audio autoplay src="https://cdn.com/file.mp4"></audio> </html>
ההפעלה האוטומטית של האודיו נכשלה כי /bar
לא כלול בהיקף.
כוונה לשלוח | מעקב Chromestatus | באג ב-Chromium
השהיית ההפעלה האוטומטית של סרטונים מושתקים במצב מוסתר
כפי שאולי כבר ידוע לך, Chrome ב-Android מאפשר להפעלת סרטונים של muted
ללא אינטראקציה של המשתמש. אם סרטון מסומן כ-muted
ויש לו
את המאפיין autoplay
, Chrome יתחיל להפעיל את הסרטון כשהוא גלוי למשתמש.
כדי להפחית את צריכת החשמל, החל מ-Chrome 58, הפעלת סרטונים עם המאפיין autoplay
תושהה כשהיא מחוץ למסך ותמשיך כשנמצאים בתצוגה, בהתאם להתנהגות של Safari ב-iOS.
כוונה לשלוח | מעקב Chromestatus | באג ב-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")';
}