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

François Beaufort
François Beaufort

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

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

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

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

מאז, המפרט של 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() לבחור קבוצת משנה שהוא תומך בה.

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

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

ALT_TEXT_HERE
הנחיה לגבי תוכן מוגן

Intent to Experiment | Chromestatus Tracker | באג ב-Chromium

HTMLVideoElement.playsInline

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

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

<video playsinline></video>

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

Intent to Ship | מעקב אחר סטטוס Chrome | באג ב-Chromium