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 pozwala 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, które występują, gdy próba odtworzenia (automatycznego) kończy się niepowodzeniem. Istnieją różne metody obejścia problemu, ale nie są one idealne. Ulepszenie metody play(), które pozwoliło rozwiązać ten problem, zostało wdrożone na platformie internetowej. Pierwsze wdrożenie nastąpiło 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 przypadku przeglądarki Chrome na komputerze 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: strona automatycznie odtworzy muzykę, gdy ją otworzysz. (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ł.