如何获取进度条的 div 元素的点击位置

Question

我的应用程序中有一个 HTML5 视频面板。我设法制作了一个运行良好的进度条。但我也希望能够通过单击进度条上的任意位置来更改视频的 currentTime。

如何使用 React 获取当前位置的比率？我在 google 上搜索了进度条组件，但它们似乎 none 给出了 value 的点击位置，但只是显示。

或者简单地说，当用户点击进度条的不同位置时，我想change/get进度条的值到那个位置。

更新：

我已经更新了演示，点击多次时进度条似乎变疯了，而且似乎也没有靠近点击的位置。

演示：https://stackblitz.com/edit/react-ts-zudlbe?file=index.tsx

Answer 1

这是我测试的整个组件。似乎有效

const ProgressBar = ({ duration, progress }: ProgressProps) => {
  return (
    <div
      onClick={(event: React.MouseEvent<HTMLDivElement>) => {
        // duration is the video duration. For example 152.
        // How can i catch the % (ratio) of clicked position of this progrssbar?
        // then I will send this % (lets say 5) to the seek function like:
        const x = (event.clientX * duration) / event.currentTarget.offsetWidth; // how to get sec?
        callback(x);
      }}
      style={{
        backgroundColor: "#ddd",
        borderRadius: 3,
        flex: 1,
        height: 6,
        overflow: "hidden",
        position: "relative"
      }}
    >
      <Progress progress={progress} />
    </div>
  );
};

如何获取进度条的 div 元素的点击位置

How to get clicked position of div element for progressbar

javascript

html5-video

typescript

reactjs

更新：