Ich versuche, die Abmessungen eines Videos abzurufen, von dem ich eine Seite mit JavaScript überlagere. Es werden jedoch die Abmessungen des Posterbilds anstelle des tatsächlichen Videos zurückgegeben, da es anscheinend vor dem Laden des Videos berechnet wird.
javascript
jquery
html5-video
Elliot
quelle
quelle
Antworten:
Spezifikation: https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element
quelle
Es ist zu beachten, dass die derzeit von Sime Vidas oben akzeptierte Lösung in modernen Browsern nicht funktioniert, da die Eigenschaften videoWidth und videoHeight erst nach dem Auslösen des Ereignisses "loadmetadata" festgelegt werden.
Wenn Sie diese Eigenschaften nach dem Rendern des VIDEO-Elements weit genug abfragen, funktioniert dies manchmal. In den meisten Fällen werden jedoch für beide Eigenschaften Werte von 0 zurückgegeben.
Um sicherzustellen, dass Sie die richtigen Eigenschaftswerte erhalten, müssen Sie Folgendes tun:
HINWEIS: Ich habe mich nicht darum gekümmert, Vor-9-Versionen von Internet Explorer zu berücksichtigen, die attachEvent anstelle von addEventListener verwenden, da Vor-9-Versionen dieses Browsers HTML5-Videos sowieso nicht unterstützen.
quelle
loadedmetadata
Bränden Null . Ich habe es gerade auf Chromium 69 gesehen. Zuhörenloadeddata
ist eine sicherere Wette.Gebrauchsfertige Funktion
Hier ist eine gebrauchsfertige Funktion, die die Abmessungen eines Videos asynchron zurückgibt, ohne etwas im Dokument zu ändern .
Hier ist das Video, das für das Snippet verwendet wird, wenn Sie es sehen möchten: Big Buck Bunny
quelle
Warten Sie auf das
loadedmetadata
Ereignis, das ausgelöst wird, wenn der Benutzeragent gerade die Dauer und die Abmessungen der Medienressource festgelegt hatAbschnitt 4.7.10.16 Ereigniszusammenfassung
https://www.w3.org/TR/html5/semantics-embedded-content.html#eventdef-media-loadedmetadata
quelle
So geht das in Vue:
quelle
In Vuejs verwende ich folgenden Code im gemounteten Tag.
quelle