עדכוני מדיה ב-Chrome בגרסה 63/64

François Beaufort
François Beaufort
GitHub

יכולות מדיה – ממשק API של מידע על פענוח קוד

כיום, מפתחי אתרים מסתמכים על isTypeSupported() או על canPlayType() כדי לדעת בצורה לא ברורה אם ניתן לפענח חלק ממדיה או לא. אבל השאלה האמיתית היא: "כמה ביצועים הם יניבו במכשיר הזה?"

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

בקצרה, כך פועל ה-API של מידע על קידוד בשלב זה. כדאי לכם לעיין בדוגמה הרשמית.

const mediaConfig = {
  type: 'media-source', // or 'file'
  audio: {
    contentType: 'audio/webm; codecs=opus',
    channels: '2', // audio channels used by the track
    bitrate: 132266, // number of bits used to encode a second of audio
    samplerate: 48000 // number of samples of audio carried per second
  },
  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
  }
};

navigator.mediaCapabilities.decodingInfo(mediaConfig).then(result => {
  console.log('This configuration is' +
      (result.supported ? '' : ' NOT') + ' supported,' +
      (result.smooth ? '' : ' NOT') + ' smooth and' +
      (result.powerEfficient ? '' : ' NOT') + ' power efficient.');
});

תוכלו לנסות הגדרות שונות של מדיה עד שמוצאים את ההגדרה המתאימה ביותר (smooth ו-powerEfficient), ולהשתמש בה כדי להפעיל את שידור המדיה המתאים. דרך אגב, ההטמעה הנוכחית של Chrome מבוססת על פרטי הפעלה שתועדו בעבר. היא מגדירה את smooth כ-True כשאחוז הפריימים שהושמטו הוא פחות מ-10%, ואילו powerEfficient היא TRUE כאשר יותר מ-50% מהפריימים מפוענחים על ידי החומרה. פריימים קטנים תמיד נחשבים חסכוניים בחשמל.

מומלץ להשתמש בקטע קוד שדומה לזה שמופיע למטה כדי לזהות זמינות ולחזור להטמעה הנוכחית שלכם בדפדפנים שלא תומכים ב-API הזה.

function isMediaConfigSupported(mediaConfig) {

  const promise = new Promise((resolve, reject) => {
    if (!('mediaCapabilities' in navigator)) {
      return reject('MediaCapabilities API not available');
    }
    if (!('decodingInfo' in navigator.mediaCapabilities)) {
      return reject('Decoding Info not available');
    }
    return resolve(navigator.mediaCapabilities.decodingInfo(mediaConfig));
  });

  return promise.catch(_ => {
    let fallbackResult = {
      supported: false,
      smooth: false, // always false
      powerEfficient: false // always false
    };
    if ('video' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.video.contentType);
      if (!fallbackResult.supported) {
        return fallbackResult;
      }
    }
    if ('audio' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.audio.contentType);
    }
    return fallbackResult;
  });
}

זמין לגרסאות מקור לניסיון

כדי לקבל כמה שיותר משוב ממפתחים שמשתמשים ב-Decoding Info API (חלק מיכולות המדיה) בתחום, הוספנו בעבר את התכונה הזו ב-Chrome 64 בתור גרסת מקור לניסיון.

תקופת הניסיון הסתיימה בהצלחה באפריל 2018.

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

הפעלת סרטונים באיכות HDR ב-Windows 10

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

סימולציה של השוואה בין SDR לבין HDR (כדי לראות איכות HDR אמיתית, נדרש מסך HDR)
השוואה בין SDR לבין HDR (כדי לראות איכות HDR אמיתית, נדרש מסך HDR)

עכשיו יש תמיכה בהפעלה בגרסת 10 ביט של פרופיל VP9 ב-Chrome ל-Windows 10 – עדכון ליוצרים ב-Chrome, כך שיש ב-Chrome תמיכה נוספת בהפעלת סרטונים באיכות HDR במצב HDR ב-Chrome. בנימה טכנית, Chrome 64 תומך עכשיו בפרופיל הצבעים scRGB, שמאפשר להפעיל מדיה באיכות HDR.

אפשר לנסות לצפות בסרטון The World in HDR in 4K (ULTRA HD) ב-YouTube, ולבדוק שהוא מריץ HDR, על ידי בדיקה של הגדרת האיכות של הנגן ב-YouTube.

הגדרת האיכות של נגן YouTube ב-HDR
הגדרת האיכות של הנגן ב-YouTube כוללת HDR

בשלב הזה, כל מה שצריך לעשות הוא להפעיל את Windows 10 Fall Creator Update, כרטיס גרפי ומסך שתואמים ל-HDR (לדוגמה, NVIDIA מסדרה 10, LG HDR TV או מסך), ולהפעיל את מצב HDR בהגדרות התצוגה של Windows.

מפתחי אתרים יכולים לזהות את סולם הצבעים המשוער שנתמך על ידי מכשיר הפלט באמצעות שאילתת המדיה האחרונה מסוג סולם צבעים ואת מספר הסיביות שמשמשות להצגת צבע על המסך באמצעות screen.colorDepth. הנה אחת הדרכים להשתמש בהם כדי לזהות אם VP9 HDR נתמך, למשל:

// Detect if display is in HDR mode and if browser supports VP9 HDR.
function canPlayVp9Hdr() {

  // TODO: Adjust VP9 codec string based on your video encoding properties.
  return (window.matchMedia('(color-gamut: p3)').matches &&
      screen.colorDepth >= 48 &&
      MediaSource.isTypeSupported('video/webm; codecs="vp09.02.10.10.01.09.16.09.01"'))
}

צריך לעדכן את מחרוזת הקודק VP9 עם פרופיל 2 שמועברת אל isTypeSupported() בדוגמה שלמעלה על סמך מאפייני קידוד הווידאו שלכם.

שימו לב שעדיין לא ניתן להגדיר צבעי HDR ב-CSS, בלוח הציור, בתמונות ובתוכן מוגן. צוות Chrome עובד על זה. עדכונים נוספים בקרוב!

רישיונות קבועים ל-Windows ול-Mac

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

עד עכשיו, ChromeOS ו-Android היו הפלטפורמות היחידות שתמכו ברישיונות קבועים. זה כבר לא נכון. עכשיו אפשר להפעיל עכשיו תוכן מוגן באמצעות EME גם כשהמכשיר במצב אופליין ב-Chrome 64 ב-Windows וב-Mac.

const config = [{
  sessionTypes: ['persistent-license'],
  videoCapabilities: [{
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    robustness: 'SW_SECURE_DECODE' // Widevine L3
  }]
}];

navigator.requestMediaKeySystemAccess('com.widevine.alpha', config)
.then(access => {
  // User will be able to watch encrypted content while being offline when
  // license is stored locally on device and loaded later.
})
.catch(error => {
  // Persistent licenses are not supported on this platform yet.
});

כדי לנסות את הרישיונות הקבועים בעצמכם, תוכלו להיכנס ל-Sample Media PWA ולבצע את הפעולות הבאות:

  1. נכנסים לכתובת https://biograf-155113.appspot.com/ttt/episode-2/.
  2. לוחצים על 'הגדרה כזמין במצב אופליין' וממתינים להורדת הסרטון.
  3. משביתים את החיבור לאינטרנט.
  4. לחץ על הלחצן 'הפעל' וצפה בסרטון!

ברירת המחדל של טעינה מראש של מדיה היא 'מטא-נתונים'

בהתאם להטמעות בדפדפנים אחרים, ב-Chrome במחשב מוגדר עכשיו ערך ברירת המחדל לטעינה מראש של רכיבי <video> ו-<audio> ל-"metadata", כדי לצמצם את השימוש ברוחב הפס ובמשאבים. החל מגרסה 64 של Chrome, ההתנהגות החדשה הזו תחול רק על מקרים שבהם לא הוגדר ערך לטעינה מראש. שימו לב שהרמז של מאפיין הטעינה מראש נמחק כשמצרפים MediaSource לרכיב המדיה, כי אתר האינטרנט מטפל בטעינה מראש משלו.

במילים אחרות, הערך של הטעינה מראש <video> הוא עכשיו "metadata", ואילו הערך של הטעינה מראש <video preload="auto"> נשאר "auto". כדאי לנסות את הדוגמה הרשמית.

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

שיעור הפעלה שאינו נתמך מעלה חריג

לאחר שינוי במפרט HTML, כשהמאפיין playbackRate של רכיבי מדיה מוגדר לערך שאינו נתמך על ידי Chrome (למשל, ערך שלילי), המערכת מוסיפה "NotSupportedError" DOMException ל-Chrome בגרסה 63.

const audio = document.querySelector('audio');
try {
  audio.playbackRate = -1;
} catch(error) {
  console.log(error.message); // Failed to set the playbackRate property
}

דרך אגב, ההטמעה הנוכחית של Chrome מעלה את החריגה הזו כאשר הערך של playbackRate הוא שלילי, קטן מ-0.0625 או גדול מ-16. נסו את הדוגמה הרשמית כדי לראות את זה בפעולה.

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

אופטימיזציות לטראק ברקע

צוות Chrome תמיד מנסה למצוא דרכים חדשות לשיפור חיי הסוללה, ו-Chrome 63 לא יוצא מן הכלל.

אם הסרטון לא מכיל טראקים של אודיו, הוא יושהה אוטומטית כשהוא יופעל ברקע (למשל, בכרטיסייה לא גלויה) בשולחן העבודה של Chrome (Windows , Mac , Linux ו-ChromeOS). זוהי בעקבות שינוי דומה שחל רק על סרטוני MSE ב-Chrome 62.

באג ב-Chromium

הסרת ההשתקה כדי ליהנות מקצב קיצוני של הפעלות

לפני Chrome 64, הצלילים הושתקו כשרמת האיכות של playbackRate הייתה נמוכה מ-0.5 או גבוהה מ-4, בגלל ירידה משמעותית באיכות. מכיוון ש-Chrome עבר להשתמש בגישה של Waveform-דמיון-חפיפה-Add (WSOLA) לפגיעה באיכות, אין יותר צורך להשתיק את הצליל. זה אומר שעכשיו אתם יכולים להשמיע צלילים לאט מאוד ומהיר במיוחד.

באג ב-Chromium