Медиа-возможности 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() выбрать подмножество, которое оно поддерживает.
Информация о декодировании описывает качество (плавность и энергоэффективность) поддержки одной пары аудио- и видеопотоков без принятия решения за вызывающую сторону. Вызывающие абоненты по-прежнему должны заказывать конфигурации мультимедиа, как они это делают с помощью 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 | Ошибка хрома
HTMLVideoElement.playsInline
Chrome теперь поддерживает логический атрибут playsInline . Если он присутствует, он намекает браузеру, что видео должно отображаться «встроенным» в документ по умолчанию, ограниченным областью воспроизведения элемента.
Подобно Safari, где видеоэлементы на iPhone не переходят автоматически в полноэкранный режим при начале воспроизведения, эта подсказка позволяет некоторым специалистам по внедрению автоматически воспроизводить полноэкранное видео. Веб-разработчики могут использовать его, чтобы отказаться от этой возможности, если это необходимо.
<video playsinline></video>
Поскольку Chrome на Android и настольных компьютерах не поддерживает автоматический полноэкранный режим, подсказка атрибута видеоэлемента playsInline не используется.