עדכוני מדיה ב-Chrome 73

François Beaufort
François Beaufort
GitHub

במאמר הזה אדבר על תכונות המדיה החדשות של Chrome 73, כולל:

תמיכה במפתחות מדיה לחומרה

במקלדות רבות בימינו יש מקשים לשליטה בפונקציות בסיסיות של הפעלת מדיה, בתור 'הפעלה/השהיה', 'הטראק הקודם' ו'הטראק הבא'. הם קיימים גם באוזניות. עד עכשיו, משתמשים במחשב לא יכולים להשתמש במקשי המדיה האלה כדי לשלוט בהפעלה של אודיו ווידאו ב-Chrome. המצב הזה משתנה היום.

מקשי המדיה במקלדת
מקשי המדיה במקלדת

אם המשתמש ילחץ על מקש ההשהיה, רכיב המדיה הפעיל שמופעל ב-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 של סשן מדיה כדי להציע זאת באפשרות תמונה בתוך תמונה.

לחצן לדילוג על המודעה בחלון &#39;תמונה בתוך תמונה&#39;
'דילוג על המודעה' לחצן בחלון 'תמונה בתוך תמונה'

כדי לספק את התכונה הזו, צריך להעביר פונקציה עם 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 מותקנות. לתשומת ליבכם: המדיניות חלה רק על דפים ב- היקף קובץ המניפסט של אפליקציית האינטרנט.

באג ב-Chromium