Aktualności multimedialne w Chrome 75

François Beaufort
François Beaufort
GitHub

Funkcje multimedialne w Chrome zostały zaktualizowane w wersji 75. W tym artykule omówię nowe funkcje, takie jak:

  • Przewidywanie, czy odtwarzanie będzie płynne i oszczędne w przypadku zaszyfrowanych multimediów.
  • Obsługa wskazówki dotyczącej atrybutu playsInline elementu wideo.

Zaszyfrowane multimedia: dekodowanie informacji

Od wersji Chrome 66 deweloperzy stron internetowych mogą korzystać z funkcji dekodowania, aby wysyłać do przeglądarki zapytania o możliwości dekodowania treści na urządzeniu na podstawie takich informacji jak kodeki, profil, rozdzielczość, szybkość transmisji bitów itp. Na podstawie wcześniejszych statystyk odtwarzania zarejestrowanych przez przeglądarkę można określić, czy odtwarzanie będzie płynne (w odpowiednim czasie) i oszczędne.

Od tego czasu specyfikacja Media Capabilities API definiująca informacje o dekodowaniu została zaktualizowana pod kątem obsługi konfiguracji zaszyfrowanych multimediów. Dzięki temu witryny korzystające z zaszyfrowanych multimediów (EME) mogą wybrać optymalne strumienie multimediów.

Oto jak działa dekodowanie informacji na potrzeby EME. Wypróbuj oficjalną próbkę.

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.
});

Odtworzenia EME wykorzystują specjalistyczne ścieżki kodu do dekodowania i renderowania, co oznacza, że obsługa kodeka i inna wydajność niż w przypadku odtwarzania z czystym dźwiękiem. Dlatego w obiekcie konfiguracji mediów przekazywanym do navigator.mediaCapabilities.decodingInfo() trzeba ustawić nowy klucz keySystemConfiguration. Wartością tego klucza jest słownik, który zawiera wiele dobrze znanych typów EME. Powiela dane wejściowe dostarczone do requestMediaKeySystemAccess() EME z jedną podstawową różnicą: sekwencje danych wejściowych podane w funkcji requestMediaKeySystemAccess() są spłaszczone do jednej wartości tam, gdzie intencją sekwencji była requestMediaKeySystemAccess()wybór obsługiwanego podzbioru.

Informacje o dekodowaniu opisują jakość (płynność i oszczędność energii) obsługi pojedynczej pary strumieni audio i wideo bez podejmowania decyzji dotyczącej rozmówcy. Rozmówcy nadal powinni zamawiać konfiguracje multimediów, tak jak w przypadku ustawienia requestMediaKeySystemAccess(). Dopiero teraz sami wpisują się na listę.

navigator.mediaCapabilities.decodingInfo() zwraca obietnicę, która jest wysyłana asynchronicznie z obiektem zawierającym 3 wartości logiczne: supported, smooth i powerEfficient. Jeśli jednak ustawisz klucz keySystemConfiguration, a supported ma wartość true, zwracany jest też kolejny obiekt MediaKeySystemAccess o nazwie keySystemAccess. Można go używać, aby prosić o klucze multimedialne i skonfigurować odtwarzanie zaszyfrowanych multimediów. Oto przykład:

// 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.
}

Pamiętaj, że dekodowanie danych zaszyfrowanych multimediów wymaga protokołu HTTPS.

Pamiętaj też, że na Androidzie i w ChromeOS może wyświetlać się prośba użytkownika tak samo jak w requestMediaKeySystemAccess(). Nie będzie wyświetlać więcej próśb niż requestMediaKeySystemAccess(), mimo że do skonfigurowania odtwarzania zaszyfrowanych multimediów będzie wymagane więcej połączeń.

ALT_TEXT_HERE
Prośba o treści chronione

Zamiar eksperymentu | Narzędzie do śledzenia stanu Chrome | Błąd Chromium

HTMLVideoElement.playsInline

Chrome obsługuje teraz atrybut wartości logicznej playsInline. Jeśli ta opcja jest dostępna, informuje przeglądarkę, że film powinien być domyślnie wyświetlany w dokumencie w sposób ograniczony do obszaru odtwarzania danego elementu.

Podobnie jak w Safari, gdzie elementy wideo na iPhonie nie przechodzą automatycznie w tryb pełnoekranowy po rozpoczęciu odtwarzania, ta wskazówka pozwala niektórym osadzonym odtwarzać filmy automatycznie na pełnym ekranie. Programiści stron internetowych mogą w razie potrzeby zrezygnować z tej funkcji.

<video playsinline></video>

Chrome na Androidzie i komputerach nie implementuje automatycznego pełnego ekranu, więc instrukcja atrybutu elementu wideo playsInline nie jest używana.

Zamiar wysyłki | Narzędzie do śledzenia stanu Chrome | Błąd Chromium