Otrzymuję komunikat o błędzie ...
Nieprzechwycony (obiecany) DOMException: play () nie powiodło się, ponieważ użytkownik nie wszedł w interakcję z dokumentem.
..podczas próby odtwarzania wideo na komputerze przy użyciu przeglądarki Chrome w wersji 66.
Znalazłem reklamę, która zaczęła się automatycznie odtwarzać w witrynie internetowej, jednak przy użyciu następującego kodu HTML:
<video
title="Advertisement"
webkit-playsinline="true"
playsinline="true"
style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
src="http://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.mp4"
autoplay=""></video>
Tak jest z pominięciem Chrome V66 za autoplay bloker naprawdę tak proste, jak po prostu dodając webkit-playsinline="true"
, playsinline="true"
oraz autoplay=""
atrybuty do <video>
elementu? Czy są jakieś negatywne konsekwencje?
Odpowiedzi:
Aby autoodtwarzanie elementów html 5 działało po aktualizacji chrome 66, wystarczy dodać
muted
właściwość do elementu wideo.Więc twój obecny kod HTML wideo
Po prostu potrzebuje
muted="muted"
Wydaje mi się, że aktualizacja Chrome 66 próbuje zatrzymać karty, które generują losowy szum na kartach użytkowników. Dlatego właściwość wyciszona powoduje, że autoodtwarzanie znów działa.
źródło
mute
atrybutu lub ustawienievolume
atrybutu nie pomaga.src
był nieprawidłowy. Zaktualizowałem fragment,src
więc wideo jest odtwarzane automatycznie.muted="true"
Zamiast tego musiałem zrobićNajlepszym rozwiązaniem, jakie znalazłem, jest wyciszenie wideo
HTML
źródło
chrome://settings/content/sound
źródło
--autoplay-policy=no-user-gesture-required
jest programowym sposobem osiągnięcia tego ustawienia.Odpowiadając na to pytanie…
Nie, nie wystarczy mieć te atrybuty, aby móc automatycznie odtwarzać multimedia z dźwiękiem, musisz mieć zarejestrowany gest użytkownika w swoim dokumencie.
Ale to ograniczenie jest bardzo słabe: jeśli otrzymałeś ten gest użytkownika w dokumencie nadrzędnym, a Twój film został załadowany z elementu iframe, możesz go odtworzyć ...
Weźmy więc na przykład te skrzypce , które są tylko
Przy pierwszym załadowaniu i jeśli nigdzie nie klikniesz, nie uruchomi się, ponieważ nie mamy jeszcze zarejestrowanego żadnego wydarzenia.
Ale po kliknięciu przycisku „Uruchom” dokument nadrzędny (jsfiddle.net) otrzymał gest użytkownika, a teraz wideo jest odtwarzane, mimo że technicznie jest załadowane w innym dokumencie.
Ale poniższy fragment, ponieważ wymaga rzeczywistego kliknięcia przycisku Uruchom fragment kodu , zostanie automatycznie odtworzony.
Oznacza to, że prawdopodobnie Twoja reklama mogła zostać odtworzona, ponieważ wykonałeś gest użytkownika na stronie głównej.
Teraz zwróć uwagę, że Safari i Mobile Chrome mają bardziej rygorystyczne reguły i będą wymagać, abyś faktycznie uruchomił
play()
metodę co najmniej raz programowo na elemencie<video>
lub<audio>
z samego programu obsługi zdarzeń użytkownika.Pokaż fragment kodu
A jeśli nie potrzebujesz dźwięku, po prostu nie dołączaj go do multimediów, wideo zawierające tylko ścieżkę wideo może być również odtwarzane automatycznie i zmniejszy wykorzystanie przepustowości przez użytkownika.
źródło
Dla mnie (w projekcie Angular) ten kod pomógł:
W HTML należy dodać
autoplay muted
W JS / TS
źródło
@ViewChild()
Angulara musisz ustawić opcję statyczną na true:@ViewChild('videoPlayer', {static: true}) videoplayer: ElementRef;
video: HTMLVideoElement;
A potem:this.video = this.videoplayer.nativeElement;
@ngOnInit()
Spróbuj użyć lisentnera zdarzeń mousemove
źródło
Rozszerz element DOM, obsłuż błąd i ostrożnie degraduj
Poniżej używam funkcji prototypu do zawijania natywnej funkcji odtwarzania DOM, przechwytywania jej obietnicy, a następnie degradowania do przycisku odtwarzania, jeśli przeglądarka zgłosi wyjątek. To rozszerzenie rozwiązuje problem wady przeglądarki i jest typu plug-and-play na każdej stronie ze znajomością elementu docelowego (elementów).
źródło
W moim przypadku musiałem to zrobić
źródło
Chrome potrzebuje interakcji użytkownika, aby wideo było odtwarzane automatycznie lub odtwarzane przez js (video.play ()). Ale interakcja może być dowolnego rodzaju, w dowolnym momencie. Jeśli klikniesz losowo na stronie, wideo odtworzy się automatycznie. Rozwiązałem wtedy, dodając przycisk (tylko w przeglądarkach Chrome) z napisem „Włącz autoodtwarzanie wideo”. Przycisk nic nie robi, tylko kliknięcie go jest wymaganą interakcją użytkownika dla dalszego filmu.
źródło
Napotkałem podobny błąd podczas próby odtworzenia pliku audio. Początkowo działało, a potem przestało działać, gdy zacząłem używać
markForCheck
metody ChangeDetector w tej samej funkcji, aby wywołać ponowne renderowanie, gdy obietnica rozwiązuje się (miałem problem z renderowaniem widoku).Kiedy zmienił
markForCheck
się dodetectChanges
niego ponownie rozpoczął pracę. Naprawdę nie potrafię wyjaśnić, co się stało, po prostu pomyślałem o rzuceniu tego tutaj, może to komuś pomoże.źródło
Należy dodać
muted
atrybut wewnątrzvideoElement
swojego kodu, aby kod działał zgodnie z oczekiwaniami. Spójrz poniżej ...Nie zapomnij dodać prawidłowego linku wideo jako źródła
źródło
Miałem problemy z graniem na telefonie z Androidem. Po kilku próbach stwierdziłem, że gdy włączone jest Oszczędzanie danych, nie ma automatycznego odtwarzania:
Nie ma autoodtwarzania, jeśli włączony jest tryb oszczędzania danych . Jeśli tryb oszczędzania danych jest włączony, autoodtwarzanie jest wyłączone w ustawieniach multimediów.
Źródło
źródło
Wpisz Chrome: // flags w pasek adresu
Szukaj: autoodtwarzanie
Ustaw to na „ Żaden gest użytkownika nie jest wymagany ”
Uruchom ponownie Chrome i nie musisz zmieniać żadnego kodu
źródło