- Deweloperzy witryn internetowych mogą teraz przewidywać, czy odtwarzanie będzie płynne i energooszczędne.
- Chrome obsługuje teraz odtwarzanie filmów HDR w systemie Windows 10.
- Odtwarzanie offline z trwałymi licencjami jest teraz obsługiwane w systemach Windows i Mac.
- Domyślna wartość wstępnego wczytania dla elementów
<video>i<audio>to teraz"metadata". - Gdy szybkość odtwarzania multimediów nie jest obsługiwana, pojawia się błąd.
- Chrome wstrzymuje wszystkie multimedia tylko z filmem.
- Dźwięk nie jest już wyciszony w przypadku ekstremalnej szybkości odtwarzania.
Możliwości dotyczące multimediów – interfejs Decoding Info API
Obecnie deweloperzy stron internetowych polegają na isTypeSupported() lub canPlayType(), aby w przybliżony sposób określić, czy można odkodować określone media. Prawdziwe pytanie brzmi jednak: „Jakie osiągnie wyniki na tym urządzeniu?”
To właśnie jest jednym z problemów, które ma rozwiązać proponowana funkcja Media Capabilities: interfejs API do wysyłania zapytań do przeglądarki o możliwości dekodowania urządzenia na podstawie informacji takich jak kodeki, profil, rozdzielczość, bitrate itp. Na podstawie poprzednich statystyk odtwarzania zapisanych przez przeglądarkę interfejs API udostępniałby informacje o tym, czy odtwarzanie powinno być płynne i energooszczędne.
Oto, w skrócie, jak obecnie działa interfejs Decoding Info API. Zapoznaj się z oficjalnym przykładem.
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.');
});
Możesz wypróbować różne konfiguracje multimediów, aż znajdziesz najlepszą (smooth i powerEfficient), i użyć jej do odtworzenia odpowiedniego strumienia multimediów. Przy okazji warto wspomnieć, że obecna implementacja w Chrome opiera się na wcześniej zarejestrowanych informacjach o odtwarzaniu. Określa ona wartość smooth jako prawda, gdy odsetek pominiętych klatek jest mniejszy niż 10%, a wartość powerEfficient jako prawda, gdy ponad 50% klatek jest dekodowanych przez sprzęt. Małe ramki są zawsze uważane za energooszczędne.
Zalecamy użycie fragmentu kodu podobnego do tego poniżej, aby wykryć dostępność i wrócić do bieżącej implementacji w przypadku przeglądarek, które nie obsługują tego interfejsu 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;
});
}
Dostępne w wersjach próbnych origin
Aby uzyskać jak najwięcej opinii od programistów korzystających z interfejsu DecodingInfo API (będącego częścią Media Capabilities), dodaliśmy tę funkcję w Chrome 64 jako wersję próbną origin.
W kwietniu 2018 r. zakończyliśmy testowanie.
Intencja eksperymentu | Intencja wdrożenia | Chromestatus Tracker | Błąd w Chromium
Odtwarzanie filmów HDR w Windows 10
Filmy w technologii High Dynamic Range (HDR) mają większy kontrast, dzięki czemu odznaczają się precyzyjnymi, szczegółowymi cieniami i oszałamiającymi światłami. Ponadto obsługa szerokiej palety kolorów oznacza, że kolory są bardziej żywe.
Odtwarzanie 10-bitowego formatu VP9 Profile 2 jest teraz obsługiwane w Chrome na system Windows 10 z aktualizacją Twórców. Chrome obsługuje też odtwarzanie filmów HDR, gdy system Windows 10 jest w trybie HDR. Chrome 64 obsługuje teraz profil kolorów scRGB, który umożliwia odtwarzanie multimediów w HDR.
Możesz to sprawdzić, oglądając film The World in HDR in 4K (ULTRA HD) w YouTube. Sprawdź, czy odtwarzanie w HDR działa, patrząc na ustawienia jakości odtwarzacza w YouTube.
Na razie wystarczy Ci system Windows 10 z aktualizacją dla twórców z jesieni 2018 r., karta graficzna i wyświetlacz zgodne z HDR (np. karta graficzna NVIDIA z serii 10, telewizor lub monitor LG HDR) oraz włączony tryb HDR w ustawieniach wyświetlacza w systemie Windows.
Deweloperzy internetowi mogą wykryć przybliżony zakres kolorów obsługiwany przez urządzenie wyjściowe za pomocą najnowszej zapytania o zakres kolorów oraz liczby bitów użytych do wyświetlania koloru na ekranie za pomocą screen.colorDepth. Oto jeden ze sposobów korzystania z tych informacji do wykrywania, czy obsługiwany jest format 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"'))
}
Napis kodu VP9 z profilem 2 przekazany do isTypeSupported() w przykładzie powyżej musi zostać zaktualizowany na podstawie właściwości kodowania wideo.
Pamiętaj, że nie można jeszcze definiować kolorów HDR w CSS, płótnie, obrazach i zawartości chronionej. Nasz zespół pracuje nad rozwiązaniem tego problemu. Więcej informacji już wkrótce.
Trwałe licencje na systemy Windows i Mac
Trwała licencja w Encrypted Media Extensions (EME) oznacza, że licencja może być przechowywana na urządzeniu, aby aplikacje mogły wczytać ją do pamięci bez wysyłania kolejnego żądania licencji do serwera. W ten sposób odtwarzanie offline jest obsługiwane w EME.
Do tej pory trwałe licencje były obsługiwane tylko na platformach ChromeOS i Android. To już nieprawda. Odtwarzanie treści chronionych za pomocą szyfrowania na poziomie elementu, gdy urządzenie jest offline, jest teraz możliwe w Chrome 64 na komputerach z systemem Windows i 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.
});
Możesz samodzielnie wypróbować licencje trwałe, korzystając z próbnej wersji PWA z multimediami i wykonując te czynności:
- Wejdź na stronę https://biograf-155113.appspot.com/ttt/episode-2/.
- Kliknij „Udostępnij w trybie offline” i poczekaj, aż film zostanie pobrany.
- Wyłącz połączenie z internetem.
- Kliknij przycisk „Odtwórz” i obejrzyj film.
Domyślnie wstępne wczytywanie multimediów jest ustawione na „metadane”.
Aby zmniejszyć wykorzystanie przepustowości i zasobów, Chrome na komputery teraz dopasowuje do implementacji innych przeglądarek domyślną wartość wstępnego wczytania elementów <video> i <audio> do "metadata". Od wersji 64 Chrome to nowe zachowanie dotyczy tylko przypadków, w których nie ustawiono wartości wstępnego wczytania. Pamiętaj, że wskazówka atrybutu wstępnego wczytania jest ignorowana, gdy do elementu multimedialnego jest dołączony element MediaSource, ponieważ witryna internetowa obsługuje wstępne wczytywanie samodzielnie.
Innymi słowy, wartość wstępna <video> to teraz "metadata", a wartość wstępna <video
preload="auto"> pozostaje równa "auto". Wypróbuj oficjalny przykładowy dokument.
Intend to Ship | Chromestatus Tracker | Chromium Bug
Nieobsługiwana wartość playbackRate powoduje wyjątek
Po zmianie specyfikacji HTML, gdy wartość playbackRate elementów multimedialnych jest ustawiona na wartość nieobsługiwaną przez Chrome (np. wartość ujemna), w Chrome 63 jest wywoływany błąd "NotSupportedError" DOMException.
const audio = document.querySelector('audio');
try {
audio.playbackRate = -1;
} catch(error) {
console.log(error.message); // Failed to set the playbackRate property
}
Warto zauważyć, że obecne wdrożenie Chrome zgłasza to wyjątkiem, gdy playbackRate jest ujemna, mniejsza niż 0,0625 lub większa niż 16. Aby zobaczyć, jak to działa, wypróbuj oficjalną próbkę.
Intend to Ship | Chromestatus Tracker | Chromium Bug
Optymalizacja ścieżki wideo w tle
Zespół Chrome zawsze szuka nowych sposobów na wydłużenie czasu pracy na baterii, a Chrome 63 nie jest tu wyjątkiem.
Jeśli film nie zawiera żadnych ścieżek audio, zostanie automatycznie wstrzymany, gdy będzie odtwarzany w tle (np. na karcie, która nie jest widoczna) w Chrome na komputerze (Windows, Mac, Linux i ChromeOS). Ta aktualizacja jest kontynuacją podobnej zmiany, która dotyczyła tylko filmów MSE w Chrome 62.
Usuwanie wyciszania w przypadku skrajnych wartości playbackRate
Przed wersją 64 Chrome dźwięk był wyciszony, gdy wartość playbackRate była poniżej 0,5 lub powyżej 4, ponieważ jakość znacznie się pogarszała. Chrome używa teraz podejścia Waveform-Similarity-Overlap-Add (WSOLA) do obniżania jakości, więc dźwięk nie musi już być wyciszony. Oznacza to, że teraz możesz odtwarzać dźwięk bardzo wolno lub bardzo szybko.