יכולות המדיה של 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() מחזירה הבטחה שעונה באופן אסינכרוני עם אובייקט שמכיל שלושה בוליאניים: 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(), למרות שנדרש מספר גדול יותר של שיחות כדי להגדיר הפעלת מדיה מוצפנת.
כוונת ניסוי | מעקב אחר Chromestatus | באג ב-Chromium
HTMLVideoElement.playsInline
מעכשיו, Chrome תומך במאפיין הבוליאני playsInline. אם הוא מופיע, הוא מעיד לדפדפן שהסרטון צריך להופיע 'בתוך' המסמך כברירת מחדל, מוגבל לאזור ההפעלה של הרכיב.
בדומה ל-Safari, שבו רכיבי וידאו ב-iPhone לא עוברים באופן אוטומטי למצב מסך מלא כשההפעלה מתחילה, הרמז הזה מאפשר לחלק מהמטמיעים ליהנות מחוויית הפעלה של סרטונים במסך מלא באופן אוטומטי. מפתחי אתרים יכולים להשתמש בו כדי לבטל את ההסכמה להשתתף בחוויית השימוש הזו, אם יש צורך.
<video playsinline></video>
מאחר ש-Chrome ל-Android ולמחשבים לא מטמיע תצוגה אוטומטית במסך מלא, לא נעשה שימוש בהצעה למאפיין של רכיב הווידאו playsInline.