במאמר הזה אדבר על תכונות המדיה החדשות של Chrome 73, כולל:
- עכשיו יש תמיכה במפתחות מדיה חומרה כדי לשלוט בהפעלת מדיה במחשב.
- מפתחי אתרים יכולים לשאול אם אפשר לאכוף מדיניות HDCP מסוימת.
- תמונה אוטומטית בתוך תמונה באפליקציות PWA במחשב, ו'דילוג על המודעה' התכונה 'תמונה בתוך תמונה' תגיע לגרסאות מקור לניסיון.
- לאפליקציות PWA במחשבים מוענקות הפעלה אוטומטית עם אודיו.
תמיכה במפתחות מדיה לחומרה
במקלדות רבות בימינו יש מקשים לשליטה בפונקציות בסיסיות של הפעלת מדיה, בתור 'הפעלה/השהיה', 'הטראק הקודם' ו'הטראק הבא'. הם קיימים גם באוזניות. עד עכשיו, משתמשים במחשב לא יכולים להשתמש במקשי המדיה האלה כדי לשלוט בהפעלה של אודיו ווידאו ב-Chrome. המצב הזה משתנה היום.
![מקשי המדיה במקלדת](https://developer.chrome.com/static/blog/media-updates-in-chrome-73/image/keyboard-media-keys-b9e8bca41e6ac.jpeg?authuser=9&hl=he)
אם המשתמש ילחץ על מקש ההשהיה, רכיב המדיה הפעיל שמופעל ב-Chrome יושהו ויקבל 'בהשהיה' אירוע מדיה. אם לחצת על מקש ההפעלה, רכיב מדיה שהיה מושהה בעבר יופעל מחדש ויקבל 'הפעלה' מדיה אירוע. אפשר להשתמש בה גם אם Chrome פועל בחזית וגם ברקע.
ב-ChromeOS, אפליקציות ל-Android שנעשה בהן שימוש במיקוד אודיו יאמרו עכשיו ל-Chrome להשהות להמשיך את האודיו כדי ליצור חוויית מדיה חלקה בין אתרים ב-Chrome, אפליקציות Chrome ואפליקציות ל-Android. בשלב הזה, האפשרות הזו נתמכת רק ב-ChromeOS במכשיר Android P.
בקיצור, מומלץ להאזין תמיד לאירועי המדיה האלה ולפעול בהתאם.
video.addEventListener('pause', function() {
// Video is now paused.
// TODO: Let's update UI accordingly.
});
video.addEventListener('play', function() {
// Video is now playing.
// TODO: Let's update UI accordingly.
});
רגע, יש עוד! באמצעות Media Session API שזמין עכשיו במחשב
(התוכנית נתמכה רק בנייד לפני כן), מפתחי אתרים יכולים לטפל במדיה
אירועים קשורים, כמו שינוי מסלול, שמופעלים על ידי מפתחות מדיה.
האירועים previoustrack
ו-nexttrack
נתמכים כרגע.
navigator.mediaSession.setActionHandler('previoustrack', function() {
// User hit "Previous Track" key.
});
navigator.mediaSession.setActionHandler('nexttrack', function() {
// User hit "Next Track" key.
});
Chrome מטפל באופן אוטומטי במקשי ההפעלה וההשהיה. אבל אם בברירת המחדל לא מתאים לך, עדיין אפשר להגדיר גורמים מטפלים בפעולות "הפעלה" ו-"pause" [השהיה] כדי למנוע זאת.
navigator.mediaSession.setActionHandler('play', function() {
// User hit "Play" key.
});
navigator.mediaSession.setActionHandler('pause', function() {
// User hit "Pause" key.
});
תמיכה במפתחות מדיה חומרה זמינה ב-ChromeOS, ב-macOS וב-Windows. Linux תגיע מאוחר יותר.
אפשר לעיין בתיעוד למפתחים הקיים ולנסות את המדיה הרשמית דוגמאות לסשנים.
Chromestatus tracker | באג ב-Chromium
מדיה מוצפנת: בדיקת מדיניות HDCP
הודות ל-HDCP Policy Check API, מפתחי אינטרנט יכולים עכשיו לשלוח שאילתות לגבי מדיניות ספציפית, דרישת HDCP, אפשר לאכוף אותה לפני שליחת הבקשה רישיונות Widevine ומדיה בטעינה.
const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });
if (status == 'usable')
console.log('HDCP 2.2 can be enforced.');
ה-API זמין בכל הפלטפורמות. עם זאת, בדיקות המדיניות בפועל עשויות
לא זמינים בפלטפורמות מסוימות. לדוגמה, הבטחה לבדיקת מדיניות HDCP
תדחה באמצעות NotSupportedError
ב-Android וב-Android WebView.
אפשר לעיין בתיעוד הקודם למפתחים ולנסות את המסמכים הרשמיים לדוגמה כדי לראות את כל גרסאות ה-HDCP הנתמכות.
הכוונה למשלוח | Chromestatus tracker | באג ב-Chromium
גרסת מקור לניסיון של התכונה 'תמונה בתוך תמונה' אוטומטית לאפליקציות PWA מותקנות
בחלק מהדפים מומלץ להזין אוטומטית את התכונה תמונה בתוך תמונה ולהשאיר אותה רכיב וידאו; לדוגמה, אפליקציות אינטרנט לשיחות ועידה בווידאו יפיקו תועלת התנהגות אוטומטית של 'תמונה בתוך תמונה' כאשר משתמש עובר בין אפליקציית האינטרנט ואפליקציות או כרטיסיות אחרות. לצערנו, לא ניתן לעשות זאת באמצעות דרישת תנועת משתמש. אז כאן נכנסת למצב 'תמונה בתוך תמונה' אוטומטית!
מאפיין autopictureinpicture
חדש, כדי לתמוך במעבר בין כרטיסיות ואפליקציות
נוסף לרכיב <video>
.
<video autopictureinpicture></video>
כך זה עובד, פחות או יותר:
- כשהמסמך מוסתר, רכיב הווידאו שבו
autopictureinpicture
האחרון שהוגדר הוא התכונה 'תמונה בתוך תמונה', אם היא מותר. - כשהמסמך הופך לגלוי, רכיב הווידאו במצב 'תמונה בתוך תמונה' יוצא ממנו באופן אוטומטי.
זה הכול! שים לב שהתכונה 'תמונה בתוך תמונה' אוטומטית חלה רק על Progressive Web Apps שהמשתמשים התקינו במחשב.
אפשר למצוא פרטים נוספים במפרט ולנסות להשתמש בגרסה הרשמית של PWA דוגמה.
הכוונה היא לניסוי | Chromestatus tracker | באג ב-Chromium
גרסת מקור לניסיון של 'דילוג על מודעה' בחלון 'תמונה בתוך תמונה'
המודל של פרסום בווידאו מורכב בדרך כלל ממודעות לפני סרטון (pre-roll). תוכן ספקים רבים מאפשרים לדלג על המודעה לאחר מספר שניות. למרבה הצער, מכיוון שחלון תמונה בתוך תמונה הוא לא אינטראקטיבי, משתמשים צופים בסרטון אי אפשר לעשות את זה היום במצב 'תמונה בתוך תמונה'.
באמצעות Media Session API שזמין עכשיו במחשב (הוא נתמך
בנייד בלבד לפני כן), ניתן להשתמש בפעולה חדשה skipad
של סשן מדיה כדי להציע זאת
באפשרות תמונה בתוך תמונה.
![לחצן לדילוג על המודעה בחלון 'תמונה בתוך תמונה'](https://developer.chrome.com/static/blog/media-updates-in-chrome-73/image/skip-ad-button-picture-095637cf16a4b.png?authuser=9&hl=he)
כדי לספק את התכונה הזו, צריך להעביר פונקציה עם skipad
במהלך התקשרות
setActionHandler()
. כדי להסתיר אותו, צריך להעביר את null
. כפי שאפשר לקרוא בהמשך,
די פשוט.
try {
navigator.mediaSession.setActionHandler('skipad', null);
showSkipAdButton();
} catch(error) {
// The "Skip Ad" media session action is not supported.
}
function showSkipAdButton() {
// The Picture-in-Picture window will show a "Skip Ad" button.
navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}
function onSkipAdButtonClick() {
// User clicked "Skip Ad" button, let's hide it now.
navigator.mediaSession.setActionHandler('skipad', null);
// TODO: Stop ad and play video.
}
כדאי לנסות את הפורמט הרשמי 'דילוג על המודעה' לדוגמה וספר לנו איך התכונה הזו לשיפור.
הכוונה היא לניסוי | Chromestatus tracker | באג ב-Chromium
הפעלה אוטומטית הוענקה לאפליקציות PWA במחשב
עכשיו, כש-Progressive Web Apps זמינות בכל הפלטפורמות של מחשבים, אנחנו מרחיבים את הכלל שהיה לנו בנייד למחשב: הפעלה אוטומטית עם האודיו מותר עכשיו לאפליקציות PWA מותקנות. לתשומת ליבכם: המדיניות חלה רק על דפים ב- היקף קובץ המניפסט של אפליקציית האינטרנט.