Automatyczne odtwarzanie dźwięku i filmów w internecie to zaawansowana funkcja, która podlega różnym ograniczeniom na różnych platformach.
Obecnie większość przeglądarek na komputerach zezwala stronom internetowym na rozpoczynanie odtwarzania <video> lub <audio> za pomocą JavaScriptu bez interakcji użytkownika.
Większość przeglądarek mobilnych wymaga jednak wyraźnego gestu użytkownika, zanim będzie możliwe odtwarzanie inicjowane przez JavaScript. Dzięki temu użytkownicy urządzeń mobilnych, z których wielu płaci za przepustowość lub przebywających w środowisku publicznym, nie zaczną przypadkowo pobierać i odtwarzać multimediów bez wyraźnej interakcji ze stroną.
W przeszłości trudno było określić, czy do rozpoczęcia odtwarzania wymagana jest interakcja użytkownika, a także wykryć błędy, które zdarzają się w przypadku próby lub niepowodzenia odtwarzania (automatycznego). Istnieje wiele obejść
obejść, jednak nie są idealne. Udoskonalenie podstawowej metody play() polegającej na rozwiązywaniu tego problemu jest już opóźnione. Wprowadziliśmy je już na platformie internetowej, wdrażając wstępnie w Chrome 50.
Wywołanie play() elementu <video> lub <audio> zwraca teraz obietnicę. Jeśli odtwarzanie się powiedzie, obietnica zostanie zrealizowana, a w przypadku niepowodzenia odtwarzania obietnica zostanie odrzucona z komunikatem o błędzie z wyjaśnieniem błędu. Dzięki temu możesz pisać intuicyjny kod podobny do tego:
var playPromise = document.querySelector('video').play();
// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
playPromise.then(function() {
// Automatic playback started!
}).catch(function(error) {
// Automatic playback failed.
// Show a UI element to let the user manually start playback.
});
}
Poza wykrywaniem, czy metoda play() się powiodła, nowy interfejs oparty na obietnicach umożliwia też określenie, kiedy metoda play() zakończyła się powodzeniem. W pewnych sytuacjach przeglądarka może opóźnić rozpoczęcie odtwarzania – np. Chrome na komputerze nie rozpocznie odtwarzania elementu <video>, dopóki karta nie stanie się widoczna. Obietnica nie zostanie zrealizowana, dopóki nie rozpocznie się odtwarzanie, co oznacza, że kod zawarty w elemencie then() nie zostanie wykonany, dopóki multimedia nie zostaną odtworzone. Poprzednie metody sprawdzania, czy działanie play() się powiodło, np. poczekanie określonego czasu na zdarzenie playing i założenie, że zdarzenie się nie uruchomi, są podatne na wyniki fałszywie negatywne w scenariuszach opóźnionego odtwarzania.
Opublikowaliśmy przykładowy podgląd tej nowej funkcji. Możesz go wyświetlić w przeglądarce, na przykład Chrome 50, która obsługuje ten interfejs oparty na technologii Promise. Uwaga: gdy wejdziesz na tę stronę, automatycznie odtworzy się muzyka. (Oczywiście, że nie!)
Strefa zagrożenia
<source> w <video> zawiera play() obietnicę nigdy nie odrzuca
W przypadku <video src="not-existing-video.mp4"\> obietnica play() jest odrzucana zgodnie z oczekiwaniami, ponieważ film nie istnieje. W przypadku <video><source src="not-existing-video.mp4" type='video/mp4'></video> obietnica play() nigdy nie odrzuca. Dzieje się tak tylko wtedy, gdy nie ma prawidłowych źródeł.