تعديلات الوسائط في الإصدار 75 من Chrome

François Beaufort
François Beaufort
GitHub

تم تعديل إمكانات الوسائط في 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()، على الرغم من طلب المزيد من المكالمات لإعداد تشغيل الوسائط المشفَّرة.

ALT_TEXT_HERE
طلب المحتوى المحمي

Intent to Experiment | Chromestatus Tracker | Chromium Bug

HTMLVideoElement.playsInline

يتيح Chrome الآن السمة المنطقية playsInline. إذا كانت هذه السمة متوفّرة، تشير إلى المتصفح أنّه يجب عرض الفيديو "مضمّنًا" في المستند بشكلٍ تلقائي، مقيّدًا بمنطقة تشغيل العنصر.

على غرار متصفّح Safari، لا تدخل عناصر الفيديو على أجهزة iPhone تلقائيًا في وضع ملء الشاشة عند بدء التشغيل، ويسمح هذا التلميح لبعض مُضمِّني المحتوى بالحصول على تجربة تشغيل فيديو تلقائي في وضع ملء الشاشة. ويمكن لمطوّري الويب استخدامها لإيقاف هذه التجربة إذا لزم الأمر.

<video playsinline></video>

بما أنّ متصفّح Chrome على أجهزة Android والكمبيوتر المكتبي لا ينفّذ ميزة التشغيل التلقائي في وضع ملء الشاشة، لا يتم استخدام التلميح الخاص بسمة عنصر playsInline الفيديو.

Intent to Ship | Chromestatus Tracker | Chromium Bug