Я пытаюсь получить размеры видео, которое я накладываю на страницу с помощью JavaScript, однако он возвращает размеры изображения плаката вместо фактического видео, поскольку кажется, что он рассчитывается до загрузки видео.
javascript
jquery
html5-video
Эллиот
источник
источник
Ответы:
Спецификация: https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element
источник
Следует отметить, что в настоящее время принятое выше решение от Sime Vidas фактически не работает в современных браузерах, поскольку свойства videoWidth и videoHeight не устанавливаются до тех пор, пока не сработает событие loadedmetadata.
Если вы запрашиваете эти свойства достаточно далеко после визуализации элемента VIDEO, это иногда может работать, но в большинстве случаев это вернет значения 0 для обоих свойств.
Чтобы гарантировать, что вы получаете правильные значения свойств, вам нужно сделать что-то вроде:
ПРИМЕЧАНИЕ. Я не беспокоился об учете версий Internet Explorer до 9, которые используют attachEvent вместо addEventListener, поскольку версии этого браузера до 9 в любом случае не поддерживают видео HTML5.
источник
loadedmetadata
срабатывании. Я только что видел это на Chromium 69. Слушатьloadeddata
- безопаснее.Готовая к использованию функция
Вот готовая к использованию функция, которая асинхронно возвращает размеры видео, ничего не меняя в документе .
Вот видео, используемое для фрагмента, если вы хотите его увидеть: Big Buck Bunny
источник
Слушайте
loadedmetadata
событие, которое отправляется, когда пользовательский агент только что определил продолжительность и размеры медиаресурса.Раздел 4.7.10.16 Сводка события
https://www.w3.org/TR/html5/semantics-embedded-content.html#eventdef-media-loadedmetadata
источник
Вот как это можно сделать во Vue:
источник
В Vuejs я использую следующий код в установленном теге.
источник