דף זה תורגם על ידי Cloud Translation API.

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

François Beaufort

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

עכשיו יש תמיכה במפתחות מדיה של חומרה כדי לשלוט בהפעלת מדיה במחשב.
מפתחי אתרים יכולים לבדוק אם ניתן לאכוף מדיניות HDCP מסוימת.
בקרוב יושקו התכונות תמונה אוטומטית בתוך תמונה באפליקציות PWA למחשב והאפשרות דילוג על המודעה במצב תמונה בתוך תמונה.
אפליקציות PWA למחשב מקבלות הפעלה אוטומטית עם צליל.

תמיכה במקשי מדיה לחומרה

כיום, במקלדות רבות יש מקשים לשליטה בפונקציות בסיסיות של הפעלת מדיה, כמו הפעלה/השהיה, הטראק הקודם והטראק הבא. גם באוזניות יש אותן. עד עכשיו, משתמשים במחשב לא יכלו להשתמש במקשי המדיה האלה כדי לשלוט בהפעלה של אודיו ווידאו ב-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 באופן אוטומטי. עם זאת, אם התנהגות ברירת המחדל לא מתאימה לכם, אפשר עדיין להגדיר רכיבי handler מסוימים של פעולות ל-play (הפעלה) ול-pause (השהיה) כדי למנוע זאת.

navigator.mediaSession.setActionHandler('play', function() {
  // User hit "Play" key.
});

navigator.mediaSession.setActionHandler('pause', function() {
  // User hit "Pause" key.
});

תמיכה במפתחות מדיה של חומרה זמינה ב-ChromeOS, ב-macOS וב-Windows. Linux תושק מאוחר יותר.

אפשר לעיין במסמכי התיעוד למפתחים שכבר קיימים, ולנסות את הדוגמאות הרשמיות של סשנים של מדיה.

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

גרסת מקור לניסיון של התכונה 'תמונה בתוך תמונה' אוטומטית לאפליקציות PWA שהותקנו

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

כדי לתמוך במעבר בין כרטיסיות ואפליקציות, מאפיין autopictureinpicture חדש מתווסף לרכיב <video>.

<video autopictureinpicture></video>

ככה זה עובד:

כשהמסמך יוסתר, רכיב הווידאו שהמאפיין autopictureinpicture שלו הוגדר לאחרונה יעבור אוטומטית למצב 'תמונה בתוך תמונה', אם תינתן הרשאה לכך.
כשהמסמך הופך לגלוי, רכיב הווידאו במצב 'תמונה בתוך תמונה' יוצא אוטומטית ממנו.

זהו, סיימתם. שימו לב שהתכונה 'תמונה אוטומטית בתוך תמונה' חלה רק על Progressive Web Apps שהמשתמשים התקינו במחשב.

אפשר לקרוא פרטים נוספים spec ולנסות להשתמש בדוגמה הרשמית של PWA.

כוונת ניסוי | מעקב אחר סטטוס Chrome | באג ב-Chromium

גרסת מקור לניסיון של 'דילוג על המודעה' בחלון 'תמונה בתוך תמונה'

מודל הפרסום בווידאו בדרך כלל מורכב ממודעות לפני הסרטון (pre-roll). ספקי תוכן מאפשרים בדרך כלל לדלג על המודעה אחרי כמה שניות. למרבה הצער, כיוון שחלון 'תמונה בתוך תמונה' אינו אינטראקטיבי, משתמשים שצופים בסרטונים ב'תמונה בתוך תמונה' לא יכולים לעשות זאת כיום.

בעזרת MediaSession API שזמין עכשיו במחשב (הוא נתמך רק בנייד בעבר), ניתן להשתמש בפעולה חדשה של skipad של סשן מדיה כדי להציע את האפשרות הזו בתמונה בתוך תמונה.

לחצן דילוג על המודעה בחלון של תמונה בתוך תמונה — הלחצן 'דילוג על המודעה' בחלון 'תמונה בתוך תמונה'

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

כדאי לנסות את הדוגמה הרשמית "דילוג על מודעה" ולספר לנו איך אפשר לשפר את התכונה הזו.

כוונת ניסוי | מעקב אחר סטטוס Chrome | באג ב-Chromium

הוענקה הפעלה אוטומטית לאפליקציות PWA למחשב

עכשיו, כשProgressive Web Apps זמינות בכל הפלטפורמות למחשבים, אנחנו מרחיבים את הכלל שהיה קיים בנייד למחשב: הפעלה אוטומטית עם סאונד אפשרית מעכשיו באפליקציות PWA שהותקנו. שימו לב שהוא חל רק על דפים בהיקף של קובץ המניפסט של אפליקציית האינטרנט.

באג ב-Chromium