У меня есть элемент video
, который необходимо визуализировать поверх некоторых других элементов (аналогично тому, как YouTube использовал «горячие точки» над областями видео). Сам элемент video
имеет динамический размер (поэтому он сохраняет свое соотношение сторон), поэтому я не знаю размеров, в которых видео фактически отображается. У меня есть собственные размеры видео, а также размер элемента обтекания. Учитывая это, как я могу определить размер отрендеренного видео?
<!-- I know 'some-file' is 1920x1080 -->
<!-- I know `.parent` is some size (1340 x 440, for example) -->
<div className="parent">
<video width="100%" height="100%">
<!-- video renders at some other size -->
<source src="some-file.mp4" type="video/mp4" />
</video>
<canvas className="my-overlay" />
</div>