reactjs - 在渲染到屏幕之前对内存中加载的视频进行 react

Question

我很难弄清楚如何在加载视频时加载微调器。我不想做 DOM 加载器，我希望在加载视频时加载页面上的所有内容。到目前为止，当我使用 onLoadStart 和 onLoadedData 时，它们似乎在整个页面加载完成时同时触发。没有帮助。

有没有办法异步加载它并在加载时显示旋转器？也许加载到虚拟内存或其他东西中？

这是我当前的代码:

“渲染”函数

    const { isLoading } = this.state;

    return (
        <React.Fragment>
            {isLoading && (
                <CircularProgress />
            )}

            <video
                loop
                muted
                autoPlay
                src={WaveVideo}
                preload={'auto'}
                type={'video/mp4'}
                className={classes.video}
                ref={ref => this.headerVideo}
                onLoadStart={() => {
                    console.log('...I am loading...')
                    this.setState({ isLoading: true });
                }}
                onLoadedData={() => {
                    console.log('Data is loaded!')
                    this.setState({ isLoading: false });
                }}>
            </video>
        </React.Fragment>
    );

Answer 1

由于包含了 autoplay 属性，因此使用 onplay 事件应该适用于这种情况。我修改了您的原始示例来演示:

componentDidMount() {
  this.setState({isLoading: true})
}

render() {
    const { isLoading } = this.state;

    return (
        <React.Fragment>
            {isLoading && <CircularProgress />}

            <video
                loop
                muted
                autoPlay
                src={WaveVideo}
                preload={'auto'}
                type={'video/mp4'}
                className={classes.video}
                ref={ref => this.headerVideo}
                onLoadEnd={() => this.setState({isLoading: false})}>
            </video>
        </React.Fragment>
    );
}

因此，当创建此组件时，它将运行 componentDidMount 生命周期函数来设置初始加载指示器状态，从而使微调器与加载视频一起渲染。然后，一旦视频开始自行播放，我们就取消加载指示器状态，这会导致微调器不再渲染。

编辑:

我后来了解到，您在示例 onloadeddata 中绑定(bind)的事件“在媒体的第一帧完成加载时触发”。这巧妙地解释了为什么您会看到两个事件同时触发。您打算使用的事件实际上是onloadend。我已将其包含在上面的示例中，替换了原始的 onplay 处理程序。