css - 使用 object-fit 计算鼠标在视频中的位置 :contain

Question

我正在尝试将鼠标事件转换为视频中的像素坐标。像素坐标是指相对于原始视频分辨率的坐标。

我的视频元素有object-fit: contain，这意味着视频的左上角不一定位于位置(0,0)，因为这张照片显示:

如果我点击这个视频中白色部分的左上角，那么我想得到 (0,0)，但为了做到这一点，我需要发现相对于视频元素(黑色边框)的视频内容(白色区域)。

我怎样才能恢复这个偏移量？

我已经知道 width、height、videoWidth 和 videoHeight，但这些只让我知道考虑缩放比例，而不是偏移量。

Answer 1

可以推导出偏移量。我认为这种代码应该可以解决问题:

if(videoHeight/height > videoWidth/width){
    scale   = videoHeight/height;
    offsetX = (videoWidth - width*scale)/2;
    offsetY = 0;
}
else{
    scale   = videoWidth/width;
    offsetY = (videoHeight - height*scale)/2;
    offsetX = 0;
}