Javascript：计算实际的视频大小，给定视频的父级大小和本机宽度/高度

Question

我有一个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>