Automatyczne odtwarzanie dźwięku i obrazu w internecie to potężna funkcja, która podlega różnym ograniczeniom na różnych platformach.
Obecnie większość przeglądarek komputerowych zawsze zezwala na rozpoczęcie odtwarzania<video> lub <audio> za pomocą JavaScriptu bez interakcji użytkownika.
Większość przeglądarek mobilnych wymaga jednak wyraźnego działania użytkownika, aby rozpocząć odtwarzanie inicjowane przez JavaScript. Dzięki temu użytkownicy mobilni, z których wielu płaci za przepustowość lub może przebywać w miejscu publicznym, nie będą przypadkowo rozpoczynać pobierania i odtwarzania multimediów bez wyraźnego wchodzenia w interakcję ze stroną.
Do tej pory trudno było określić, czy do rozpoczęcia odtwarzania wymagana jest interakcja użytkownika, oraz wykryć błędy występujące podczas próby odtworzenia (automatycznego) i jego niepowodzenia. Istnieją różne workarounds, ale nie są one idealne. Ulepszenie metody play(), które pozwoliłoby rozwiązać ten problem, od dawna było potrzebne. Wprowadziliśmy je na platformę internetową, a pierwsze wdrożenie pojawiło się w Chrome 50.
Wywołanie play() elementu <video> lub <audio> zwraca teraz obietnice. Jeśli odtwarzanie się powiedzie, obietnica zostanie spełniona, a jeśli nie, zostanie odrzucona wraz z komunikatem o błędzie wyjaśniającym przyczynę. Dzięki temu możesz pisać intuicyjny kod, np. taki:
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.
});
}
Oprócz wykrywania, czy metoda play() się powiodła, nowy interfejs oparty na obietnicach pozwala określić, kiedy metoda play() się powiodła. W niektórych kontekstach przeglądarka internetowa może opóźnić rozpoczęcie odtwarzania. Na przykład w Chrome na komputery odtwarzanie <video> rozpocznie się dopiero wtedy, gdy karta będzie widoczna. Obietnica nie zostanie spełniona, dopóki odtwarzanie nie zostanie faktycznie rozpoczęte, co oznacza, że kod w then() nie zostanie wykonany, dopóki nie rozpocznie się odtwarzanie multimediów. Wcześniejsze metody określania, czy zdarzenie play() zakończyło się powodzeniem, takie jak oczekiwanie przez określony czas na zdarzenie playing i przyjmowanie, że jeśli nie zadziała, to oznacza niepowodzenie, są podatne na fałszywie wyniki w sytuacjach opóźnionego odtwarzania.
Opublikowaliśmy przykład praktycznego zastosowania tej nowej funkcji. Otwórz go w przeglądarce, takiej jak Chrome 50, która obsługuje ten interfejs oparty na obietnicy. Uwaga: gdy ją otworzysz, muzyka zacznie się automatycznie odtwarzać. (chyba że oczywiście nie).
Strefa zagrożenia
<source> w <video> powoduje, że play() promise nigdy nie odrzuca
W przypadku <video src="not-existing-video.mp4"\> play() obiecuje odrzucić zgłoszenie, ponieważ film nie istnieje. W przypadku <video><source src="not-existing-video.mp4" type='video/mp4'></video> play() nigdy nie odrzuca obietnicy. Dzieje się tak tylko wtedy, gdy nie ma prawidłowych źródeł.