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

François Beaufort

יכולות המדיה של Chrome עודכנו בגרסה 75. במאמר הזה אדבר על התכונות החדשות, כולל:

• חיזוי לגבי השאלה האם הפעלה תהיה חלקה ובעלת עוצמה יעילה עבור מדיה מוצפנת.
• תמיכה ברמז למאפיין playsInline של רכיב הווידאו.

מדיה מוצפנת: פרטי פענוח

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

מפרט Media Capabilities API, שמגדיר את פרטי הפענוח, עודכן מאז ומטפל גם בהגדרות של מדיה מוצפנת, כדי שאתרים שמשתמשים במדיה מוצפנת (EME) יוכלו לבחור את שידורי המדיה האופטימליים.

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

const encryptedMediaConfig = {
  type: 'media-source', // or 'file'
  video: {
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    width: 1920,
    height: 1080,
    bitrate: 2646242, // number of bits used to encode a second of video
    framerate: '25' // number of frames used in one second
  },
  keySystemConfiguration: {
    keySystem: 'com.widevine.alpha',
    videoRobustness: 'SW_SECURE_DECODE' // Widevine L3
  }
};

navigator.mediaCapabilities.decodingInfo(encryptedMediaConfig).then(result => {
  if (!result.supported) {
    console.log('Argh! This encrypted media configuration is not supported.');
    return;
  }

  if (!result.keySystemAccess) {
    console.log('Argh! Encrypted media support is not available.')
    return;
  }

  console.log('This encrypted media configuration is supported.');
  console.log('Playback should be' +
      (result.smooth ? '' : ' NOT') + ' smooth and' +
      (result.powerEfficient ? '' : ' NOT') + ' power efficient.');

  // TODO: Use `result.keySystemAccess.createMediaKeys()` to setup EME playback.
});

להפעלות EME יש נתיבי קוד מיוחדים לפענוח ולעיבוד, כלומר תמיכה וביצועים שונים בקודק בהשוואה להפעלות ברורות. לכן צריך להגדיר מפתח keySystemConfiguration חדש באובייקט הגדרת המדיה שמועבר אל navigator.mediaCapabilities.decodingInfo(). הערך של המפתח הזה הוא מילון שמכיל כמה סוגי EME מוכרים. כך משכפלים את ערכי הקלט שניתנו ל-requestMediaKeySystemAccess() של EME עם הבדל משמעותי אחד: רצפים של מקורות הקלט שניתנים ל-requestMediaKeySystemAccess() מושמדים לערך יחיד בכל מקום שבו הכוונה של הרצף הייתה requestMediaKeySystemAccess() לבחור קבוצת משנה שנתמכת.

המידע על פענוח הקוד מתאר את האיכות (החלקת והיעילות האנרגטית) של התמיכה בזוג יחיד של שידורי אודיו ווידאו, בלי לקבל החלטה מצד המתקשר. המתקשרים עדיין צריכים להזמין הגדרות מדיה כמו במקרה של requestMediaKeySystemAccess(). רק עכשיו הם מטיילים ברשימה בעצמם.

navigator.mediaCapabilities.decodingInfo() מחזירה את ההבטחה שעוברת באופן אסינכרוני עם אובייקט שמכיל שלושה בוליאניים: supported, smooth ו-powerEfficient. עם זאת, כשמוגדר מפתח keySystemConfiguration ו-supported הוא true, מוחזר גם אובייקט MediaKeySystemAccess אחר בשם keySystemAccess. אפשר להשתמש בה כדי לבקש כמה מפתחות מדיה ולהגדיר הפעלה של מדיה מוצפנת. לדוגמה:

// Like rMSKA(), orderedMediaConfigs is ordered from most to least wanted.
const capabilitiesPromises = orderedMediaConfigs.map(mediaConfig =>
  navigator.mediaCapabilities.decodingInfo(mediaConfig)
);

// Assume this app wants a supported and smooth media playback.
let bestConfig = null;
for await (const result of capabilitiesPromises) {
  if (result.supported && result.smooth) {
    bestConfig = result;
    break;
  }
}

if (bestConfig) {
  const mediaKeys = await bestConfig.keySystemAccess.createMediaKeys();
  // TODO: rest of EME path as-is
} else {
  // Argh! No smooth configs found.
  // TODO: Maybe choose the lowest resolution and framerate available.
}

שימו לב שפרטי פענוח של מדיה מוצפנת דורשים HTTPS.

בנוסף, חשוב לשים לב שהתכונה עשויה לגרום להצגת הודעות למשתמשים ב-Android וב-ChromeOS באותו האופן כמו requestMediaKeySystemAccess(). עם זאת, לא יוצגו יותר הודעות מ-requestMediaKeySystemAccess(), למרות שנדרשות יותר שיחות כדי להגדיר הפעלה מוצפנת של מדיה.

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

HTMLVideoElement.playsInline

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

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

<video playsinline></video>

ב-Chrome ב-Android ובמחשבים לא ניתן להטמיע מסך מלא אוטומטי, לכן לא נעשה שימוש ברמז של מאפיין רכיב הווידאו playsInline.

כוונה לשלוח | מעקב Chromestatus | באג ב-Chromium