ReactPlayer 使用自定义按钮时会重新渲染

Question

我正在使用 ReactPlayer 播放来自不同来源（例如 Youtube 和 Vimeo）的视频。

我想实现一个自定义播放/暂停按钮以及一个自定义滑块来显示玩家进度。

我目前正在使用 React.useState 来跟踪播放/暂停状态和播放器进度，但是，每当我单击播放/暂停按钮时，播放器就会重新渲染，使其再次加载并从头开始。

还有其他方法可以做到这一点并防止播放器重新渲染吗？

这是玩家代码

<ReactPlayer ref={playerRef} url={source.url} controls={true} width='100%' height={smallScreen ? '420px' : '100%'} playing={playing} onProgress={player.progress} />

<Button startIcon={playing ? <PauseRounded /> : <PlayArrowRounded />} onClick={player.togglePlay}>{smallScreen ? '' : playing ? 'Pause' : 'Play'}</Button>

<Slider size='small' min={0} max={100} value={playerProgress} color='inherit' sx={{ ml: 1, mr: 2 }} />

这是播放器控制代码

const [playing, setPlaying] = React.useState(false);

const [playerProgress, setPlayerProgress] = React.useState(0);

const player = {
    togglePlay: React.useMemo(() => () => {
        setPlaying(!playing);
    }, [playing]),
    progress: (state) => {
        // console.log(playerRef.current);
        setPlayerProgress(state.played * 100);
    },
};

谢谢你。

我尝试过使用 Native React 组件，但它看起来很复杂，因为我正在使用 Meteor Framework，并且需要进行一些订阅，但我无法弄清楚如何与 Native React 一起使用。

Answer 1

、 、 、 、 、 、 、 、 、 、 、 、 、 、 、 、 、 、 。 সেরেরের কের কের কের কের কের ক্র কের কের ক্কের请参阅本指南。 ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????