Próbuję uzyskać wymiary filmu, którego nakładam na stronę za pomocą JavaScript, jednak zwraca on wymiary obrazu plakatu zamiast rzeczywistego wideo, ponieważ wydaje się, że jest obliczany przed załadowaniem wideo.
javascript
jquery
html5-video
Elliot
źródło
źródło
Odpowiedzi:
Specyfikacja: https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element
źródło
Należy zauważyć, że obecnie akceptowane powyżej rozwiązanie autorstwa Sime Vidas w rzeczywistości nie działa w nowoczesnych przeglądarkach, ponieważ właściwości videoWidth i videoHeight są ustawiane dopiero po uruchomieniu zdarzenia „loadmetadata”.
Jeśli zdarzy się, że zapytasz o te właściwości wystarczająco długo po wyrenderowaniu elementu VIDEO, może to czasami zadziałać, ale w większości przypadków zwróci wartości 0 dla obu właściwości.
Aby zagwarantować, że otrzymujesz prawidłowe wartości właściwości, musisz zrobić coś w następujący sposób:
UWAGA: Nie zawracałem sobie głowy uwzględnianiem wersji Internet Explorera sprzed 9, które używają attachEvent zamiast addEventListener, ponieważ wersje tej przeglądarki starsze niż 9 i tak nie obsługują wideo HTML5.
źródło
loadedmetadata
pożarów. Właśnie to widziałem w Chromium 69. Słuchanieloadeddata
jest bezpieczniejszym zakładem.Funkcja gotowa do użycia
Oto gotowa do użycia funkcja, która zwraca wymiary wideo asynchronicznie, bez zmiany czegokolwiek w dokumencie .
Oto film użyty we fragmencie, jeśli chcesz go zobaczyć: Big Buck Bunny
źródło
Nasłuchuj
loadedmetadata
zdarzenia, które jest wywoływane, gdy agent użytkownika właśnie określił czas trwania i wymiary zasobu multimedialnegoSekcja 4.7.10.16 Podsumowanie zdarzeń
https://www.w3.org/TR/html5/semantics-embedded-content.html#eventdef-media-loadedmetadata
źródło
Oto, jak można to zrobić w Vue:
źródło
W Vuejs używam następującego kodu w zamontowanym tagu.
źródło