在渲染到屏幕之前反应内存中的视频加载

Question

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

有没有办法异步加载它并在加载时显示微调器？也许加载到虚拟内存或什么？

这是我当前的代码：

"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}
                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 "is fired when the first frame of the media has finished loading"。这巧妙地解释了为什么您看到两个事件同时触发。您打算使用的事件实际上是 onloadend。我将其包含在上面的示例中，替换了原来的 onplay 处理程序。

在渲染到屏幕之前反应内存中的视频加载

React video loading in memory before rendering to screen

asynchronous

loading

html5-video

reactjs