Html 如何在ReactJS中为视频元素使用playbackRate参数？

我需要你的帮助来修复我的代码

class header extends Component {
    playVideo() {
        // You can use the play method as normal on your video ref
        this
            .refs
            .vidRef
            .play();
    }

    pauseVideo() {
        // Pause as well
        this
            .refs
            .vidRef
            .pause();
    }
    render() {
        const speed = 10
        return (
            <div className="content">
                <video ref="vidRef" playbackRate={speed} src={Videofilm} type="video/mp4"></video>

                <Buttons
                    playVideo={this
                        .playVideo
                        .bind(this)}
                    pauseVideo={this
                        .pauseVideo
                        .bind(this)}/>
            </div>
        );
    }
}

类头扩展组件{
播放视频（）{
//您可以在视频参考上使用正常的播放方法
这
参考文献
vidRef先生
.play（）；
}
pauseVideo（）{
//也暂停一下
这
参考文献
vidRef先生
.暂停（）；
}
render（）{
恒速=10
返回(
);
}
}

任何人都可以告诉我如何使用该参数来控制ReactJS中视频的速度

---

谢谢大家!

要让它工作起来真是一团糟，但是请阅读下面的步骤并查看代码示例

首先，为

html元素创建一个Ref

然后，创建一个更新ref的playbackRate属性的函数 （即someFunction=（）=>ref.current.playbackRate=0.5；）

最后，通过

html元素onCanPlay（）事件方法调用该函数

导出默认函数VideoBackground（）{

const videoRef=useRef（）；
const setPlayBack=（）=>{
videoRef.current.playbackRate=0.5；
};
返回(
setPlayBack（）}>
);
}

---

如果您想控制交互，可以组合useRef、useState和useffect

调用堆栈在下面

onInput->setPlayback called->setPlaybackRate called并更新playbackRate->useEffect，同时触发playbackRate并更新videoRef的playbackRate

代码如下（基于Flip，谢谢！）

---

那么，在播放视频时，如何更改速度？您的示例将其更改为固定速度，但是在播放视频时，如果不使用渲染重新加载整个视频，您将如何使用另一个控件来更改速度？

export const Player: React.FC = ( {video} ) => {

  const videoRef= useRef();
  const [playbackRate, setPlaybackRate] = useState(1);

  useEffect(() => {
     videoRef.current.playbackRate = playbackRate;
  }, [playbackRate]);

  const setPlayBack = (e) => {
    setPlaybackRate(e.target.value);
  };

  return (
    <>
        <video ref={videoRef}>
          <source src={video} type="video/mp4" />
        </video>
        <form>
          <input onInput={setPlayBack} type="range" value={playbackRate} min="0.5" max="4" step="0.1" />
        </form>
    </>
  );
}

  const setPlayBack = (e) => {
    setPlaybackRate(e.target.value);
    videoRef.current.playbackRate = playbackRate;
  };