How can I translate between client coordinates of a HTML video element and picture coordinates?

Let’s say I have a video element where I want to handle mouse events:

const v = document.querySelector('video');

v.onclick = (ev) => {
  ev.preventDefault();
  console.info(`x=${event.offsetX}, y=${event.offsetY}`);
};
document.querySelector('#play').onclick =
  (ev) => v.paused ? v.play() : v.pause();
document.querySelector('#fit').onchange =
  (ev) => v.style.objectFit = ev.target.value;

<button id="play">play/pause</button>
<label>object-fit: <select id="fit">
  <option>contain</option>
  <option>cover</option>
  <option>fill</option>
  <option>none</option>
  <option>scale-down</option>
</select></label>
<video
  style="width: 80vw; height: 80vh; display: block; margin: 0 auto; background: pink;"
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
>
</video>

The event object gives me coordinates relative to the bounding box of the player element (pink). How can I convert between those and coordinates of the actual scaled picture?

I don’t particularly care if overflowing coordinates (those beyond the picture frame) are clipped or extrapolated, I don’t mind rounding errors, and I don’t even care much in which units I get them (percentages or pixels). I would, however, like the solution to be robust to changes to object-fit and object-position CSS properties, and I also want to be able to convert bare coordinates without a mouse event.

How can I perform such a conversion?

from How can I translate between client coordinates of a HTML video element and picture coordinates?